LearnExpression Support Forum / Expression Programs / Microsoft Expression Web / CSS Align three boxes horizontally with in the wrapper / Latest Posts

RE: CSS Align three boxes horizontally with in the wrapper

Dustin — Fri, 22 Aug 2008 14:25:09 GMT

You would clear them afterwards, with something like the footer, you wouldn't put a clear on each of them individually.

RE: CSS Align three boxes horizontally with in the wrapper

Doc — Tue, 19 Aug 2008 07:37:39 GMT

If you clear the floats, will the columns stay next to each other? Wouldn't they drop back down without the float?

RE: CSS Align three boxes horizontally with in the wrapper

cujoo — Mon, 23 Apr 2007 12:56:32 GMT

Thanks Dustin,

you guys are doing great job here

RE: CSS Align three boxes horizontally with in the wrapper

Dustin — Tue, 10 Apr 2007 12:34:13 GMT

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.

CSS Align three boxes horizontally with in the wrapper

cujoo — Thu, 05 Apr 2007 20:28:55 GMT

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 ###################/

<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> 
<div id="footer"></div>
</div> 
</body>

</html>

/################# .aspx File End################/