Nothing wrong with nesting div inside one another.
First thing you want to do is add a doctype declaration to the top of your html pages, get rid of the extra meta tag for content type and insert the missing opening body tag.
You've got some unneeded divs, and floats going on all over the place when all thats really needed is positioning of two elements - the left hand column and the content on the right side of the main content. There's five main elements on the original page: main top, main left, main right, main bottom, and the left column. Assign each of those a div. Then you'll need one div wrapped around everything but the left column, and one div wrapped around main left and main right for positioning.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Something</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
**meta name tags here**
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="maintop">Content</div>
<div id="holder">
<div id="mainleft">Content</div>
<div id="mainright">Content</div>
</div> <--!close of holder div -->
<div id="mainbottom">Content</div>
</div> <--!close of main div -->
<div id="leftcolumn">Content</div>
</body
</html>
Then in your CSS: Set the margins in body to center your content and pull it down from the top of the page. Set the left margin of main to slightly more than the width of the left column. Add position relative to holder to contain any element positioned inside it. Set the widths of mainleft and mainright. Add absolute positioning to mainright to place it within the holder div and to left column to bring it up to the top of the page. From there its a matter of adding some margins, padding and styles to the different elements.
Code:
body {
margin: 15px 7%;
}
#main {
margin-left: 180px;
}
#main-top {
** position and width can be left at default**
}
#holder {
position: relative;
}
#mainleft {
width: 70%;
}
#mainright {
position: absolute; top: 0; right: 0;
width: 30%;
}
#main-bottom {
** position and width can be left at default**
}
#leftcolumn {
position: absolute; top: 15px;
width: 175px;
}
Floats can be buggy, absolute positioning gives you more precision and is less prone to quirks in different browsers. Using % for horizontal values allows for a flexible design. Placing the left column with your navigation at the bottom of the markup ensures that user agents that don't support CSS (screenreaders for visually impaired users for example) and search engines will see the most important content first and not have to wade through a list of links at the top of every page.
A couple other things that don't have to do with positioning: Use id rather than class for elements that only occur once on the page. Use an unordered list for your navigation (it's a list of links), it's sematically correct and gives you access to the ul, li, and a tags for adding style. Use borders instead of adding an extra division for a line. You don't need all those font styles, declare your overall font style once in the body tag and use plain <p></p> tags for each paragraph. Use h1, h2, h3 etc. for the headings and define styles for those in your CSS.
Help with inline DIVs (I think anyhow)
Reply With Quote
Originally Posted by billyboy
Bookmarks