XHTML/CSS 3 Column Quandry
Question
I am new to the world of coding, XHTML, CSS and PHP. This is my first attempt to conjure a what I understand to be a 3 column layout based on my minimal knowledge of CSS.
What I am confused about is using overflow: auto as well as structuring the document.
For example, I was reading the tutorial at http://www.icms.info/website-howto/css-tutorial which I believe to be convoluted. I hence created a 3 column layout based on what I knew. I changed the position of the content div tag just above the footer div tag as opposed to it appearing above navigation. My confusion hence is
Question 1
Why did I have to change the position of my content div tag from (as the article suggests that the content div tag be above the navigation div tag)?
<div id="container">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="navigation">
navigation
</div>
<div id="news">
news
</div>
<div id="footer">
footer
</div>
</div>
to
<div id="container">
<div id="header">
header
</div>
<div id="navigation">
navigation
</div>
<div id="news">
news
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
Question 2
Why wasn't I able to use the declaration overflow: auto in the container id selector ie
#container {
width: 750px;
margin: 0px auto;
border: 1px dashed #000000;
overflow: auto;
}
and had to resort to clear: both in the footer selector?
Entire Code
<meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
font-family: arial, sans-serif;
font-size: medium;
}
#container {
width: 750px;
margin: 0px auto;
border: 1px dashed #000000;
}
#header {
height: 120px;
background-color: gray;
}
#content {
background-color: red;
width: 715px;
text-align: center;
}
#navigation {
background-color: orange;
float: left;
}
#news {
background-color: blue;
float: right;
}
#footer {
background-color: green;
clear: both;
}
</style>
<div id="container">
<div id="header">
header
</div>
<div id="navigation">
navigation
</div>
<div id="news">
news
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
EDIT
@Phil.Wheeler This is what I started with;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
font-family: arial, sans-serif;
font-size: medium;
}
#container {
width: 750px;
margin: 0px auto;
border: 1px dashed #000000;
overflow: auto;
}
#header {
height: 120px;
background-color: gray;
}
#content {
background-color: red;
width: 715px;
text-align: center;
}
#navigation {
background-color: orange;
float: left;
}
#news {
background-color: blue;
float: right;
}
#footer {
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="navigation">
navigation
</div>
<div id="news">
news
</div>
<div id="footer">
footer
</div>
</div>
</body>
2 answers
solution1
0 2011-05-12 11:23:42
Question 1
having the navigation as high as possible is better for SEO.
Question 2
use the overflow: auto only on elements, which you actually WANT to have overflow auto. It may be anyway a bad idea to have an overflow: auto, because, websites with a scrollbar within a content section is eg bad for mobile devices. You may want to avoid this (or at least make different layouts, when a mobile device accesses your site)
you may want to work with this approach:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
font-family: arial, sans-serif;
font-size: medium;
}
#container {
width: 750px;
margin: 0px auto;
border: 1px dashed #000000;
overflow: auto;
}
#header {
height: 120px;
background-color: gray;
}
#content {
width: 390px;
background-color: red;
float: left;
display: block;
}
#navigation {
width: 180px;
background-color: orange;
float: left;
display: block;
}
#news {
width: 180px;
background-color: blue;
float: left;
display: block;
}
#footer {
clear: both;
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
header
</div>
<div id="navigation">
navigation
</div>
<div id="content">
content
</div>
<div id="news">
news
</div>
<div id="footer">
footer
</div>
</div>
</body>
solution2
0 ACCPTED 2011-05-13 01:58:13
As you point out in your opening sentence, you are new to coding so some of the HTML / CSS structure rules may seem a little counter-intuitive to start with.
I'll answer your second question first as it's the most direct. The use of the "overflow" property dictates to your browser how it should present any content that goes past the boundaries of the element it's contained in. For example, if you have a <div> element that is 100 pixels high, but your content is a full paragraph that goes well past 100 pixels:
-
overflow: visiblewill show all the content as spilling out over the border of yourdiv. -
overflow: hiddenwill expand the size of yourdivto contain all your content (as long as no other parent rules prevent or override this behaviour). -
overflow: scrollwill display scroll bars so the user can scroll up and down (or left and right) within thediv. -
overflow: autowill add scroll bars to thedivonly if its content exceeds its fixed size.
Read more about the overflow property here .
Regarding your three column layout, you'll find that changing your CSS rules a little and slightly modifying your HTML structure will make life much easier without necessarily needing to rely on overflow or clear properties in your styles. I'm assuming your columns are Content, Navigation and News.
Have a look at this example:
<div class="leftCol">
<h2>Left Column</h2>
<p>Left column is 250px by default. It can be extended by applying other classes.</p>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div class="rightCol">
<h2>Right Column</h2>
<p>The right column is by default 300px wide. It can be extended by applying other classes.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ul>
</div>
<div class="main">
<h2>Main Content</h2>
<p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of “leftCol” and “rightCol” are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
</div>
Notice I position my floated columns in the order: left, right, main. My main column simply takes up whatever space is left between the two side columns. Here is the CSS to do it:
.leftCol{float:left;width:250px;_margin-right:-3px;}
.rightCol{float:right;width:300px;_margin-left:-3px;}
.main{display:table-cell;*display:block;width:auto;}
I haven't needed to use overflow or clear to achieve this and everything lays out nicely within whatever container I place these three elements in.
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.