aligning divs on same row help!!!

**moisea** · 03-01-2007, 02:09 PM

how to get somthing like this

Code:

<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

Code:

<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

Thread: aligning divs on same row help!!!

Thread Tools

Search Thread

aligning divs on same row help!!!

Bookmarks

Bookmarks

Posting Permissions