Go Back   Computer Forums > Web Design | Website Development > Web Programming
Click Here to Login
Join Computer forums Today


Reply
 
Thread Tools Search this Thread Display Modes
 
Old 07-17-2006, 09:39 PM   #1
Solid State Member
 
Join Date: Jul 2006
Posts: 8
Default Two divs next to each other.

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:
Code:
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 is offline   Reply With Quote
Old 07-17-2006, 10:55 PM   #2
Solid State Member
 
Join Date: Jul 2006
Posts: 8
Default Re: Two divs next to each other.

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.

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

PaulF is offline   Reply With Quote
Old 07-18-2006, 12:20 AM   #3
BSOD
 
King of Kings's Avatar
 
Join Date: Mar 2006
Posts: 1,072
Default Re: Two divs next to each other.

King of Kings is offline   Reply With Quote
Old 02-26-2008, 07:55 AM   #4
Beta Member
 
Join Date: Feb 2008
Posts: 1
Default Re: Two divs next to each other.

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:
Code:
#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:
Code:
<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/>
Snuurtje is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off



All times are GMT -5. The time now is 05:30 PM.


Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0