|
|
|
Forum Newbie
Group: Forum Members
Last Login: 4/24/2007 8:29:02 PM
Posts: 2,
Visits: 25
|
|
| I am trying to to align three boxes horizontally with in the subwrapper div. but I am getting the third box out of the loop. can any one help me on this Here is my CSS code /****************************CSS****************************/ #header{
height:200px;background-color:maroon;
width:800px;
} #wrapper{
position:absolute;
width:800px;
margin:0px;padding:0px;
}
#first{
margin:0;padding:0; width:250px;
background-color:gray;
position:absolute;
}
#second{
top:0;
margin:0;padding:0;
width:250px;
background-color:aqua;
position:relative;
left:275px;
}
#three{
margin:0;padding:0;
width:250px;
background-color:green;
left:550px;
position:relative;
top:0;
}
#footer{
margin:0;padding:0;
width:800px;
height:100px;
background-color:black;
}
.heading{
background:olive;
width:250px;
}
#subbody{
background-color:teal;
} /******************* CSS file End********************/ /################# .aspx File ###################/ <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="default.css" />
</head> <body >
<div id="wrapper">
<div id="header"></div>
<div id="subwrapper">
<div id="first">
<div class="heading">Movies1</div>
<div id="subbody">
<ul>
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</div>
</div>
<div id="second">
<div class="heading">Movies2</div>
<div id="subbody">
<ul>
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</div>
</div> <div id="three" >
<div class="heading">Movies3</div>
<div id="subbody">
<ul>
<li>link 1</li>
<li>link 1</li>
<li>link 1</li>
</ul>
</div>
</div>
</div> <!-- sub wrapper Div end ----->
<div id="footer"></div>
</div> <!-- wrapper end ------>
</body> </html>
/################# .aspx File End################/
|
|
|
|
|
Supreme Being
Group: Administrators
Last Login: 10/24/2008 2:27:36 PM
Posts: 437,
Visits: 632
|
|
| Well I don't see anything jumping out in the code right away, but I would try floating them regardless. I'm assuming the positioning is causing the problem, but I don't have anything here to test that out on right now. I'd try something like this; #first{
width:250px;
background-color:gray;
float:left;
}
#second{
margin-left:25px;
width:250px;
background-color:aqua;
float:left; }
#three{
margin-left:25px;
width:250px;
background-color:green;
float:left;
}
You'll have to make sure you clear those floats eventually, and you might have to adjust the margin-lefts I put in there.
=========================
My wife has given birth to our twins, so I'm still going to be spotty around here. It never seems to correct itself does it? I'm sorry, I'm trying.
=========================
|
|
|
|
|
Forum Newbie
Group: Forum Members
Last Login: 4/24/2007 8:29:02 PM
Posts: 2,
Visits: 25
|
|
| Thanks Dustin, you guys are doing great job here
|
|
|
|
|
Forum Newbie
Group: Forum Members
Last Login: 8/20/2008 10:26:12 AM
Posts: 4,
Visits: 16
|
|
If you clear the floats, will the columns stay next to each other? Wouldn't they drop back down without the float?
Doc
|
|
|
|
|
Supreme Being
Group: Administrators
Last Login: 10/24/2008 2:27:36 PM
Posts: 437,
Visits: 632
|
|
You would clear them afterwards, with something like the footer, you wouldn't put a clear on each of them individually.
=========================
My wife has given birth to our twins, so I'm still going to be spotty around here. It never seems to correct itself does it? I'm sorry, I'm trying.
=========================
|
|
|
|