Member Avatar for 9tontruck

[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 because: n/a
  • 2 Contributors
  • 4 Replies
  • 153 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by nospryexpert
Member Avatar for 9tontruck

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

Member Avatar for nospryexpert

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 ...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.