Hi, everybody! I'm new in web-design, and currently i'm learning the DIV positioning. I have written some code and i'm not sure: have i understood the main idea or not. Plz, look at it and leave your comments and advices, i'll be very thankful :) Are all the sites done in this way?

The CSS:

body{
	margin: 2% 15% 0% 15%;
	background: #232323;
	color: #C8E6E6;
	font-family: "Verdana";
	font-size: 16px;
}

.top, .middle_left_menu, .middle_content, .bottom{
	background-color: #626262;
	border: dashed #FFF 1px;
	padding: 5px;
}

.top{
	position: relative;
	width: 100%;
	height: 8%;
}

.middle_left_menu{
	margin: 10px 10px 10px 0px;
	position: absolute;
	width: 10%;
	height: 30%;
}

.middle_content{
	margin: 10px;
	position: relative;
	left: 16%;  /* is there any other way to put it by the right side of middle_left_menu? i measured "16%" by myself, 
				but can distance be measured and middle_content positioned automatically?*/
	width: 50%;
	height: 65%;
}
.bottom{
	margin: 10px 10px 10px 0;
	position: relative;
	width: 100%;
	height: 8%;
}
/*why it works properly on Opera and Mozilla, but doesn't on IE8? where is the bug?*/

And the index.html:

<html>
	<head>
		<link rel="stylesheet" type="text/CSS" href="style.css">
	</head>
	
	<body>
		<div class="top"> top </div>
		<div class="middle_left_menu"> middle left menu </div>
		<div class="middle_content"> middle main content </div>
		<div class="bottom"> footer </div>
	</body>
</html>

Thnx :)

Recommended Answers

All 16 Replies

Try to use absolute positioning as minimum as u can.

why?

Well, I haven't had all that many problems with absolute positioning - just remember that the absolute position is relative to body and the margins do not collapse. Relative is relative to the parent element which may have its own positioning.

As to your original query. Use floats.

html Syntax (Toggle Plain Text)

   1.
      <html>
   2.
      <head>
   3.
      <link rel="stylesheet" type="text/CSS" href="style.css">
   4.
      </head>
   5.
       
   6.
      <body>
   7.
      <div class="top"> top </div>


   8.
      <div class="middle_left_menu" style='float:left'> middle left menu </div>
   9.
      <div class="middle_content" style='float:right'> middle main content </div>

   9a. 
      <div style='clear:both'></div> <!--this clears the floats so the bottom will be in the proper position below everything.-->
  10.
      <div class="bottom"> footer </div>
  11.
      </body>
  12.
      </html>

Using the float property will allow the divs to adjust to the content - one major caveat though - floats are also easy to break. If the user is using larger fonts than you are then the right hand div may drop down below the left one to compensate. So I also suggest using the max-width and min-width style properties as well. These set how wide or narrow the divs can go.

Absolute position creates problems when you make some website and wants to add some ads by third party. So when they put ads on it then there is very much chance that that ad collapse with your absolute positioned div.

As I said I, personally, have not had that issue - but I also don't allow ads on my sites. Sometimes absolute is the only way to make things work properly. But if it causes issues in a particular instance, then don't use it.

Member Avatar for diafol

My 2penneth - I dislike absolute. There's something really unwholesome about it. I know floats have issues, but absolute just freaks me out. Relativing and absoluting are headaches in the background. But, if you're creating liquid layouts, I suppose you don't have much of a choice with certain implementations. Your html is sleek and devoid of presentational markup, which means your CSS has to do some heavy lifting.

Another solution (noticed that Dandello provided a float solution and a clear div), would be to place a wrapper div over the whole page and give that a margin. Then place float columns with % sizes inside that. Then you can do without the clear div. Either way, you end up adding presentational markup.

thank you all, guys! :) I have a question, when you personally make a web site, how do you make your positioning?

position:relative.
Always.

Float divs to get them side by side.

For my own sites, I use divs and floats for positioning and tables for tabular data. I'm not terribly worried that the sites don't look exactly the same over the different browsers and I know my readers are using more recent browsers. (Like anyone running Windows has much of a choice?) I'm more concerned that the code be valid to the highest standard.

Member Avatar for diafol

Divs and floats with margins (although that can be tricky!). I tend to use fixed-width in the majority of my projects, so positioning (relative or otherwise) isn't so much of an issue. I try to reduce the amount of presentational markup to an absolute minimum, avoiding divitis and spanitis, leaving the hard work to CSS. However, IE is a pig, make no bones about it - so the latest groovy CSS techniques won't work. Sometimes a conditional style is unavoidable - that really upsets me as it's so ugly and feels like a cop-out.

When i use relative positioning and floats:
"float: left;" for my left menu is ok, but "float: right" sets the content too right from left menu. I want it to be just by the right side of left menu with 15px of margin -> How can i do it???

And one more thing:
@ardav: how exactly you solve your problems with minimum of divs with CSS?

Okay - assuming you don't have backgrounds to worry about in the right div - give the left div a % width. Give the right div just slightly less than 100 less the first div's width. (the less than 100 is for the natural padding in the divs.)

Then either left-align the text in the right div - giving it the proper margins OR, float a left div inside your right div - again giving it the proper margins.

Columns are still not easy in html and css.

You will have to play around with it a bit, but that should do it.

The other way is to (assuming your divs are going to be fixed distance from the top) go with absolute positioning. Absolute has it's place and this may be the best solution for you.

Member Avatar for diafol

And one more thing:
@ardav: how exactly you solve your problems with minimum of divs with CSS?

Use the parent tag. E.g. for navigation:

<ul id="nav">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

How many times have you seen 3 or more nested divs before you hit the actual navigation container? Have a look at some CMS templates and you'll see what a mess they make of their markup.

Here's an example of one of my blogs (blogspot.com):

<div></div></div></div> 
<div class='body-fauxcolumns'> 
<div class='fauxcolumn-outer body-fauxcolumn-outer'> 
<div class='cap-top'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
<div class='fauxborder-left'> 
<div class='fauxborder-right'></div> 
<div class='fauxcolumn-inner'> 
</div> 
</div> 
<div class='cap-bottom'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
</div> 
</div> 
<div class='content'> 
<div class='content-fauxcolumns'> 
<div class='fauxcolumn-outer content-fauxcolumn-outer'> 
<div class='cap-top'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
<div class='fauxborder-left'> 
<div class='fauxborder-right'></div> 
<div class='fauxcolumn-inner'> 
</div> 
</div> 
<div class='cap-bottom'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
</div> 
</div> 
<div class='content-outer'> 
<div class='content-cap-top cap-top'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
<div class='fauxborder-left content-fauxborder-left'> 
<div class='fauxborder-right content-fauxborder-right'></div> 
<div class='content-inner'> 
<header> 
<div class='header-outer'> 
<div class='header-cap-top cap-top'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
<div class='fauxborder-left header-fauxborder-left'> 
<div class='fauxborder-right header-fauxborder-right'></div> 
<div class='region-inner header-inner'> 
<div class='header section' id='header'><div class='widget Header' id='Header1'> 
<div id='header-inner'> 
<a href='http://....' style='display: block'> 
<img alt='......' height='140' id='Header1_headerimg' src='......' style='display: block' width='831'/> 
</a> 
</div> 
</div></div> 
</div> 
</div> 
<div class='header-cap-bottom cap-bottom'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
</div> 
</header> 
<div class='tabs-outer'> 
<div class='tabs-cap-top cap-top'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
<div class='fauxborder-left tabs-fauxborder-left'> 
<div class='fauxborder-right tabs-fauxborder-right'></div> 
<div class='region-inner tabs-inner'> 
<div class='tabs section' id='crosscol'></div> 
<div class='tabs section' id='crosscol-overflow'></div> 
</div> 
</div> 
<div class='tabs-cap-bottom cap-bottom'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
</div> 
<div class='main-outer'> 
<div class='main-cap-top cap-top'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
<div class='fauxborder-left main-fauxborder-left'> 
<div class='fauxborder-right main-fauxborder-right'></div> 
<div class='region-inner main-inner'> 
<div class='columns fauxcolumns'> 
<div class='fauxcolumn-outer fauxcolumn-center-outer'> 
<div class='cap-top'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
<div class='fauxborder-left'> 
<div class='fauxborder-right'></div> 
<div class='fauxcolumn-inner'> 
</div> 
</div> 
<div class='cap-bottom'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
</div> 
<div class='fauxcolumn-outer fauxcolumn-left-outer'> 
<div class='cap-top'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
<div class='fauxborder-left'> 
<div class='fauxborder-right'></div> 
<div class='fauxcolumn-inner'> 
</div> 
</div> 
<div class='cap-bottom'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
</div> 
<div class='fauxcolumn-outer fauxcolumn-right-outer'> 
<div class='cap-top'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
<div class='fauxborder-left'> 
<div class='fauxborder-right'></div> 
<div class='fauxcolumn-inner'> 
</div> 
</div> 
<div class='cap-bottom'> 
<div class='cap-left'></div> 
<div class='cap-right'></div> 
</div> 
</div>

This is just for styling the top part of the page (banner etc) - before all the content!! I was so disgusted with the presentational markup, I almost dumped the template.

You have the ability to give any tag a block or inline display (and possibly float), so trivial positioning should be straightforward. Naturally, a balance should be struck between minimalistic markup and how much of an impact a change in markup has on CSS. I favour descendants and adjacents, trying to avoid classnames and ids for the sake of them. However, change your markup slightly and you totally bugger your styling.

Very true - Divs are so easy to use it's too easy to over use them - virtually any element can be positioned without placing them in divs. Check out http://www.shadolibrary.org/library/index.shtml (I am in the process of cleaning it up even further.)

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.