Log in

View Full Version : aligning divs on same row help!!!


moisea
03-01-2007, 02:09 PM
how to get somthing like this
<table width="100%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table> with CSS.
yeah i would like insert 3 things on top of my page flags on the left, links in the middle and styleswisher on the right. how will i get to insert all on the same row?
instead they all appear on seperate rows.
many thanks guys.
Blake
03-01-2007, 05:41 PM
<html>
<head>

<style type="text/css">

.floatleft
{
float: left;
width: 20&#37;
}

.floatright
{
float: right;
width: 20%
}

.center
{
text-align: center;
position: absolute;
left: 20%;
width: 60%;
}

</style>
</head>
<body>

<div class="floatleft">Stuff on the left</div>
<div class="center">Stuff in the middle</div>
<div class="floatright">Stuff on the right</div>

</body>
</html>
moisea
03-01-2007, 08:40 PM
thanks every much blake
blueflowers
03-07-2007, 08:23 PM
a more efficient way to do this is as such:

<div style="float: left;">
left content
</div>

<div style="float: left;">
center content
</div>

<div style="float: left;">
right conent
</div>

//if you want to clear to next line //

<br style="clear: both;" />

OR

<ul>
<li style="display: inline;">left content</li>
<li style="display: inline;">center content</li>
<li style="display: inline;">right content</li>
</ul>

hope that helps as well!
boxxertrumps
03-07-2007, 08:50 PM
But you cant have block level element inside an inline element.

and if the window isn't wide enough to accommodate the content then it will stack, so make sure to put it into a fixed width div.
blueflowers
03-07-2007, 09:11 PM
the code works fine without explicit width set, the only time content will stack is if it's an inline element (which it isn't here) and the outset element isn't set explicitly