Why Div 100% Width Doesn't Work As Expected
I'm learning CSS and finding that it's not always so intuitive (welcome to webdev, I guess). :) In an attempt to make a simple, static progress bar, I use the HTML file below: <
Solution 1:
By placing your text div inside (as a child of) your colored div, you're telling HTML that you want the text to appear inside the colored div. So a width of 100% on the inner div means whatever the width of its parent div is, which you have set to 20%.
EDIT: added code *EDIT: updated code*
<html><head><style>#bar{
width: 100%;
position: relative;
}
#progress{
background-color: #0a0;
width: 20%;
position: absolute;
z-index: 0;
}
#progress_text{
text-align: center;
width: 100%;
position: relative;
z-index:1;
}
.progress_cell{
}
</style></head><body><tableborder='1'cellspacing='0'><tr><td>Sample Cell</td><tdclass="progress_cell"><divid="bar"><!-- This is meant to be a progress bar --><divid="progress"> </div><divid="progress_text">
Text Here! Text Here! But it's really long, and it's going to overflow ...
</div></div></td></tr></table></body></html>Solution 2:
here's your intro to html / css. thank me when you get my bill ;). first ... tables are for tabular data. not layout second ...
#wrapper {
position:absolute;
top:10px;
left:50%;
width:900px;
height:500px;
margin:0px auto 0px -450px;
padding:0px;
background-color:#369;
}
#box_1 {
width:100%;
height:100px;
margin:0px auto;
padding:0px;
background-color:red;
}
and here's the html ...
<html><head></head><body><divid="wrapper"><divid="box_1"><p>stuff</p></div></div></body></html>hope this helps get you started
Solution 3:
If you set width to %,it will take the width of their parent element.In your case.the div takes the width of the parent element i.e td
Solution 4:
Here's a solution (I think?)
Post a Comment for "Why Div 100% Width Doesn't Work As Expected"