Two divs next to each other.

[PaulF]

Title explains it. I want 2 divs next to each other, without the left one "pushing the right one down."

[ menu ][ content ]

I am using XHTML 1.1 and no tables, so don't try any funny stuff.

And yeah... float doesn't seem to be working. What I got:

HTML:
<div id="wrap"> 

    <div id="menu">
        Left Stuff
    </div>

    <div id="center">
        Right Stuff
    </div>
            
</div> 

CSS:
div#wrap {
    height: 500px;
    width: 700px;
}

div#menu {
     float: left;
     border: 2px solid #770000;
     height: 100%;
     width: 75px;
}

div#center {
     float: right;
     border: 2px solid #007700;
     height: 100%;
     width: 625px;
}

[edit]Small CSS change

 

[PaulF]

Solved!

It never occured to me that the borders took up an extra 8 pixels (2px for each side, each box) in addition to the width. So I had to change the width of my wrapper to 708px, instead of 700px.
Let this be a lesson learned.

div#wrap {
    min-height: 100%;
    height: 500px;
    width: 708px;
}

 

[King of Kings1]

 

[Snuurtje]

hey,

came across this because im having almost the exactsame problem, i see that for your wrapper you have a fixed height, whilst i require to have variable height accoriding to the size of the DIV's inside the wrapper (witch on their own scale according to amount of text inside). However when i do not have a height setting so it should scale automatically, my wrapper is so small, it doesnt show it's contents.

Anyone know how to fix this?
CSS:

#newspost {
	position:relative;
	padding:10px 10px 10px 10px;
border: 1px solid #000000;
	width:680px;
	background-color:#d6d6d6;	
	margin-left: auto;
	margin-right: auto;
	color: #ff9000;
}

#newsimage{
position:relative;
float: left;
border: 1px solid #000000;
	width:80px;
	height:80px;
}

#newstext{
position:relative;
float: right;
width:580px;
border: 1px solid #000000;
}

HTML:

<div id="newspost">
<center><img src="divider2.png" height="13" width="680"></center>
<div id="newsimage"><img src="'.$row['image'].'" height="80" width="80"></div>
<div id="newstext"><i><p>'.$row['message'].'</i></p></div>
</div><br/>