0

[IMG]http://img26.imageshack.us/img26/5063/ddddqk.jpg[/IMG]

<style>
div#back{
	width:1000px;
	height:1000px;
	margin-left: auto;
	margin-right: auto;
	background-color:#096;	
}
div#topmenu{
	width:400px;
	height:35px;
	position:relative;
	top:5px;
	left:595px;
	background-color:#9F0;	
}

div#logopart{
	width:950px;
	height:70px;
	position:relative;
	top:0px;
	left:50px;
	background-color:#0FF;	
}

div#leftmenu{
	width:100px;
	height:400px;
	position:relative;
	top:0px;
	left:0px;
	background-color:#999;

}
div#cont{
	width:900px;
	height:500px;
	position:relative;
	top:0px;
	left:0px;
	background-color:#FF6;
}
</style>
...
<div id=back>
	<div id="topmenu">topmenu</div>
    <div id="logopart">logopart</div>
    <div style='display:inline;'>
    	<div id="leftmenu">leftmenu</div>
    	<div id="cont">cont</div>
    </div>
</div>

how the hell do I put "cont" div on the right of "leftmenu" without using "absolute"??
The screenshot was little bit cropped out and there is no problem on width. PLease help!

Edited by 9tontruck: n/a

2
Contributors
4
Replies
5
Views
5 Years
Discussion Span
Last Post by nospryexpert
0

I'm wondering why you don't want to use "absolute". I'm no div positioning guru but this little tutorial/demonstration has helped me more than once.

http://www.barelyfitz.com/screencast/html-training/css/positioning/


Hope it helps.

Because I set up "margin-left: auto;margin-right: auto;" on the parent div,
it stays in the center all together when a user changes window size. If any of them have "absolute" position, they are no longer moving all together. That's why

0

I got the answer tho :D thx
the parent div should have had "position:relative"

I got it also but used a bit different technique. The div part -

<div id="main"> 
<div id="topmenu"></div>
<div id="logopart"></div>
<div id="leftmenu"></div>
<div id="cont"></div>
</div>

The CSS part -

#main   {
	width: 1000px;
	height: 1000px;
	position: relative;
	background-color: #FFF;
}
#topmenu {
	background-color: #F00;
	height: 35px;
	width: 400px;
	left: 595px;
	top: 5px;
	position: absolute;
}
#logopart {
	background-color: #00F;
	height: 70px;
	width: 950px;
	position: relative;
	top: 40px;
	left: 50px;
}
#leftmenu {
	height: 400px;
	width: 100px;
	background-color: #FF0;
	position: relative;
	top: 40px;
	float: left;
}
#cont {
	background-color: #C96;
	height: 500px;
	position: relative;
	top: 40px;
	float: right;
	width: 900px;
}

I used different colors and main=back but ...

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.