Two column layout issue

HTML & CSS
1

Hello All,

I am new to designing and trying to code a two column layout in Html/CSS. The issue I am having is with the sidebar. In the sidebar having a header in the div. The code for the site is:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>Demo Web Page</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				font-family:Verdana, Sans-Serif;
				font-size:small;
			}
			#wrapper{
				width:930px;
				margin:0 auto;
			}
			#header{
				height:150px;
				background-color:#164f84;
			}
			@font-face{
					font-family: "LithosProBlack";
					src: url(fonts/lithospro-black-webfont.eot);
					src: url(fonts/lithospro-black-webfont.svg);
					src: url(fonts/lithospro-black-webfont.ttf);
					src: url(fonts/lithospro-black-webfont.woff);



			}
			#logo{
				padding-left:10px;
				padding-top:19px;
				margin-bottom:20px;
			}
	
			.site-title{
				font-family: LithosProBlack;
				color:#fff;
				font-size:24px;
				text-rendering: optimizeLegibility !important;
				-webkit-font-smoothing: antialiased !important;
			}
			.site-description{
				color:#fff;
				font-family: Verdana, sans-serif;
				font-size:12px;
				font-style:normal;
				padding-left:65px;
			}
			#decoration{
				background-image: url("images/Flags.png");
				background-repeat:no-repeat;
				width:930px;
				height:327px;
				margin:0 auto;
				margin-top:-60px;
			}
			#content{
				margin-top:260px;
				background-color:#f4f5f5;
				margin: 0 auto;
				border:1px solid #164f84;
				width:930px;
				height:100%;
			}
			#main-content{
				padding:5px;
				float:left;
				margin-right:238px;

			}
			
			#sidebar{
				float:right;
				width:230px;
			}
			.post{
				border-bottom:1px solid #164f84;
				margin-bottom:8px;
			}
			.post-header h1{
				font-family:Verdana, sans-serif;
				font-size:18px;
				font-weight:bold;
				color:#164f84;
				padding:5px;
				border-bottom:1px solid #164f84;
			}
			.post-meta{
				font-family:Verdana, sans-serif;
				font-size:12px;
				padding:8px;
				border-bottom:1px solid #164f84;
			}
			.post-content{
				text-align:justify;
				padding:5px;
			}

			span.spcolor{
				color:#164f84;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<div id="logo">
					<h1 class="site-title"> My Site Title</h1>
					<h2 class="site-description"> Site Subtitle</h2>
				</div>
			</div>
			<div id="decoration"></div>

			<div id="content">
				<div id="sidebar">
					<div class="widget">
						<h1 class="wheader">MyWidgets</h1>
					</div>
				</div><!-- end of div sidebar-->
				<div id="main-content">

					<div class="post">
						<div class="post-header">
							<h1>Demo Post One</h1>
						</div><!--End of div post header-->
						<div class="post-meta">
							<p>Author: <span class="spcolor">admin</span> May 5, 2014          Posted In: <span class="spcolor">Category1>></span></p>
						</div><!--End of div post meta -->
						<div class="post-content">
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi augue metus, faucibus id est ac, rhoncus iaculis quam. Nam aliquam suscipit lacus, et pulvinar neque suscipit id. Phasellus lorem tellus, volutpat quis augue et, cursus euismod nisi. Sed at quam nec lacus blandit rhoncus. Etiam bibendum orci massa, vitae pellentesque libero vehicula quis. Proin tristique aliquam tincidunt. Sed euismod lorem ut est rutrum pretium. Ut sodales vitae nunc sit amet euismod. Aenean quis rutrum neque, sit amet ultrices dui. Integer velit neque, rutrum vel laoreet a, iaculis vitae tortor. Proin auctor vitae felis et lacinia. Vivamus congue ultrices interdum. Nam auctor fermentum felis, vitae viverra magna malesuada id.</p>

							<p>Vestibulum cursus laoreet quam, a ultricies neque vehicula sed. Cras porttitor condimentum lorem, at commodo nulla malesuada ut. Maecenas quis sapien consectetur, congue diam ut, pretium mi. Aliquam scelerisque placerat massa non interdum. Morbi ut venenatis mauris. Maecenas condimentum fermentum enim sed sagittis. Praesent pretium, diam eget tempor tempus, elit sem porta velit, sollicitudin feugiat mi mi ac velit. Nulla placerat lorem ac libero suscipit dictum. Nullam pharetra consectetur rutrum. Nam ullamcorper ligula purus, at pharetra velit consectetur et. Sed condimentum sapien vel magna auctor, non consectetur leo sollicitudin.</p>

							<p>Mauris aliquet quis sem ac blandit. Proin lobortis egestas risus nec tristique. Vivamus a congue lectus. Vestibulum sed tristique dui. Maecenas aliquet lorem non scelerisque interdum. Vivamus ligula risus, posuere et fringilla vel, gravida a turpis. Proin placerat ut risus eget luctus.</p>

							<p>Duis posuere erat vitae nulla vehicula, vitae gravida leo elementum. Ut sit amet justo eget tortor porta pulvinar. Nam non mauris nec lectus tempor porttitor. Cras odio odio, pharetra vel fermentum euismod, auctor sit amet risus. Nunc diam purus, scelerisque sed tincidunt a, consequat laoreet est. Duis consectetur adipiscing venenatis. Sed eget dolor nisi. Nam volutpat enim commodo, vulputate eros ac, placerat diam.</p>
						</div><!-- End of div post content-->
					</div><!--end of div post-->
					
					
				</div><!--end of div main content-->
				
			</div>
		</div>
	</body>
</html>

The sidebar is showing above the main content. Please review the screenshot enclosed.

Thanks in Advance
NewBie

2

You don’t need to float the content column, and doing so is causing the issue, so just remove the line in red:

#main-content {
padding: 5px;
[COLOR="#FF0000"]float: left;[/COLOR]
margin-right: 238px;
}
3

Hello Ralph,
Thanks that worked for me. I have one more query though regarding the layout.

We have sidebar first


<div id="content">
				<div id="sidebar">
				</div><!-- end of div sidebar-->
				<div id="main-content">
                                </div>
</div>

But this structure is not Search Engine Optimized as important content is put behind the sidebar that means sidebar comes first.

How can I redo this with my main content comes first and then the sidebar in the coding.

If I do that right now the sidebar shows below main content.

Thanks
NewB

4

Hi,

You can do that with negative margins and an extra wrapper like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Demo Web Page</title>
<style>
@font-face {
	font-family: "LithosProBlack";
	src: url(fonts/lithospro-black-webfont.eot);
	src: url(fonts/lithospro-black-webfont.svg);
	src: url(fonts/lithospro-black-webfont.ttf);
	src: url(fonts/lithospro-black-webfont.woff);
}
* {
	margin:0;
	padding:0;
}
body {
	font-family:Verdana, Sans-Serif;
	font-size:small;
}
#wrapper {
	width:930px;
	margin:0 auto;
}
#header {
	min-height:150px;
	background-color:#164f84;
}
#logo {
	padding-left:10px;
	padding-top:19px;
	margin-bottom:20px;
}
.site-title {
	font-family: LithosProBlack;
	color:#fff;
	font-size:24px;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}
.site-description {
	color:#fff;
	font-family: Verdana, sans-serif;
	font-size:12px;
	font-style:normal;
	padding-left:65px;
}
#decoration {
	background-image: url("images/Flags.png");
	background-repeat:no-repeat;
	background-color:red;/* for testing */
	min-height:327px;
	margin:0 auto;
}
#content {
	background-color:#f4f5f5;
	margin: 0;
	border:1px solid #164f84;
	clear:both;
	zoom:1.0;
}
#content:after {/* contain floats*/
	content:" ";
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
}
#main-content-wrap {
	float:left;
	width:100%;
	margin-right:-230px;/* sidebar width*/
}
#main-content {
	padding:5px;
	margin-right:238px;/* sidebar width*/
}
#sidebar {
	float:right;
	width:230px;
}
.post {
	border-bottom:1px solid #164f84;
	margin-bottom:8px;
}
.post-header h1 {
	font-family:Verdana, sans-serif;
	font-size:18px;
	font-weight:bold;
	color:#164f84;
	padding:5px;
	border-bottom:1px solid #164f84;
}
.post-meta {
	font-family:Verdana, sans-serif;
	font-size:12px;
	padding:8px;
	border-bottom:1px solid #164f84;
}
.post-content {
	text-align:justify;
	padding:5px;
}
span.spcolor {
	color:#164f84;
}
</style>
</head>
<body>
<div id="wrapper">
		<div id="header">
				<div id="logo">
						<h1 class="site-title"> My Site Title</h1>
						<h2 class="site-description"> Site Subtitle</h2>
				</div>
		</div>
		<div id="decoration"></div>
		<div id="content">
				<div id="main-content-wrap">
						<div id="main-content">
								<div class="post">
										<div class="post-header">
												<h1>Demo Post One</h1>
										</div>
										<!--End of div post header-->
										<div class="post-meta">
												<p>Author: <span class="spcolor">admin</span> May 5, 2014          Posted In: <span class="spcolor">Category1>></span></p>
										</div>
										<!--End of div post meta -->
										<div class="post-content">
												<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi augue metus, faucibus id est ac, rhoncus iaculis quam. Nam aliquam suscipit lacus, et pulvinar neque suscipit id. Phasellus lorem tellus, volutpat quis augue et, cursus euismod nisi. Sed at quam nec lacus blandit rhoncus. Etiam bibendum orci massa, vitae pellentesque libero vehicula quis. Proin tristique aliquam tincidunt. Sed euismod lorem ut est rutrum pretium. Ut sodales vitae nunc sit amet euismod. Aenean quis rutrum neque, sit amet ultrices dui. Integer velit neque, rutrum vel laoreet a, iaculis vitae tortor. Proin auctor vitae felis et lacinia. Vivamus congue ultrices interdum. Nam auctor fermentum felis, vitae viverra magna malesuada id.</p>
												<p>Vestibulum cursus laoreet quam, a ultricies neque vehicula sed. Cras porttitor condimentum lorem, at commodo nulla malesuada ut. Maecenas quis sapien consectetur, congue diam ut, pretium mi. Aliquam scelerisque placerat massa non interdum. Morbi ut venenatis mauris. Maecenas condimentum fermentum enim sed sagittis. Praesent pretium, diam eget tempor tempus, elit sem porta velit, sollicitudin feugiat mi mi ac velit. Nulla placerat lorem ac libero suscipit dictum. Nullam pharetra consectetur rutrum. Nam ullamcorper ligula purus, at pharetra velit consectetur et. Sed condimentum sapien vel magna auctor, non consectetur leo sollicitudin.</p>
												<p>Mauris aliquet quis sem ac blandit. Proin lobortis egestas risus nec tristique. Vivamus a congue lectus. Vestibulum sed tristique dui. Maecenas aliquet lorem non scelerisque interdum. Vivamus ligula risus, posuere et fringilla vel, gravida a turpis. Proin placerat ut risus eget luctus.</p>
												<p>Duis posuere erat vitae nulla vehicula, vitae gravida leo elementum. Ut sit amet justo eget tortor porta pulvinar. Nam non mauris nec lectus tempor porttitor. Cras odio odio, pharetra vel fermentum euismod, auctor sit amet risus. Nunc diam purus, scelerisque sed tincidunt a, consequat laoreet est. Duis consectetur adipiscing venenatis. Sed eget dolor nisi. Nam volutpat enim commodo, vulputate eros ac, placerat diam.</p>
										</div>
										<!-- End of div post content--> 
								</div>
								<!--end of div post--> 
								
						</div>
						<!--end of div main content--> 
				</div>
				<!-- end main-content-wrap -->
				<div id="sidebar">
						<div class="widget">
								<h1 class="wheader">MyWidgets</h1>
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
						</div>
				</div>
				<!-- end of div sidebar--> 
				
		</div>
</div>
</body>
</html>

Be careful with setting heights on elements as text content will always grow and you never know what text size users will be using. There is no need to keep settingt widths either where the parent has the width defined - as in your wrapper.

Also things like height:100% will be on no use whatsoever to you in most cases as percentage height can only be based on a parent that has a height set so effectively you get height:auto or a fixed height. (See the css faq on 100% height for more info). In most normal cases you do not need height:100% unless you are using it on the html and bod elements to gain an initial 100% for some fancy techniques such as the sticky footer.

Lastly remember to contain your floats as an element that only has floats as children will in fact contain nothing and be aero height because floats are removed from the flow.

Hope that helps :slight_smile:

5

Hello Paul,
Appreciate your help. I got the point and got the issue resolved.

Just one last question can we have remove some of the divs so that the code becomes smaller and logically correct or is the code that you sent me is logically and semantically correct.

Please guide once again.

Thanks
PhpNewB

6

Hi,

I only added oner extra div to your code and that was needed to do that negative margin trick to reverse the source order.

When you code a page you code it as best as you can structurally but if you need extra effects that require additional elements then that is a compromise you have to make. Extra divs will rarely have an impact on SEO as long as you have good content and indeed source order change will have little effect if you have bad content. In the end you code for content and the user first and not SEO. Search engines are good and finding the content and analysing the data so even content way down the source will be recognised as long as it is good and valid content.

You may be penalised though for using more than one H1 (although html5 allows this) but I believe that search engines do not quite see it that way. It makes little sense to have more than one h1 on a page unless its a very special kind of site.

There is also no need to keep putting divs around things and your logo, subheader and meta divs are wasted elements as is your decoration div. An empty element just for styling the background is seldom needed these days unless you are supporting older browsers. I don;t know what your decoration div was doing as the content was empty but of it is just decoration then pin the image on some existing element or use :after to place the decoration into place.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Demo Web Page</title>
<style>
@font-face {
	font-family: "LithosProBlack";
	src: url(fonts/lithospro-black-webfont.eot);
	src: url(fonts/lithospro-black-webfont.svg);
	src: url(fonts/lithospro-black-webfont.ttf);
	src: url(fonts/lithospro-black-webfont.woff);
}
* {
	margin:0;
	padding:0;
}
body {
	font-family:Verdana, Sans-Serif;
	font-size:small;
}
#wrapper {
	width:930px;
	margin:0 auto;
}
#header {
	min-height:131px;
	background-color:#164f84;
	padding-left:10px;
	padding-top:19px;
	margin-bottom:20px;
}
.site-title {
	font-family: LithosProBlack;
	color:#fff;
	font-size:24px;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}
.site-description {
	color:#fff;
	font-size:12px;
	font-style:normal;
	padding-left:65px;
}
#decoration {
	background-image: url("images/Flags.png");
	background-repeat:no-repeat;
	background-color:red;/* for testing */
	min-height:327px;
	margin:0 auto;
}
#content {
	background-color:#f4f5f5;
	margin: 0;
	border:1px solid #164f84;
	clear:both;
	zoom:1.0;
}
#content:after {/* contain floats*/
	content:" ";
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
}
#main-content-wrap {
	float:left;
	width:100%;
	margin-right:-230px;/* sidebar width*/
}
#main-content {
	padding:5px;
	margin-right:238px;/* sidebar width*/
}
#sidebar {
	float:right;
	width:230px;
}
.post {
	border-bottom:1px solid #164f84;
	margin-bottom:8px;
}
h2.post-header {
	font-size:18px;
	font-weight:bold;
	color:#164f84;
	padding:5px;
	border-bottom:1px solid #164f84;
}
.post-meta {
	font-size:12px;
	padding:8px;
	border-bottom:1px solid #164f84;
}
.post-content {
	text-align:justify;
	padding:5px;
}
span.spcolor {
	color:#164f84;
}
</style>
</head>
<body>
<div id="wrapper">
		<div id="header">
				<h1 class="site-title"> My Site Title</h1>
				<h2 class="site-description"> Site Subtitle</h2>
		</div>
		<div id="content">
				<div id="main-content-wrap">
						<div id="main-content">
								<div class="post">
										<h2 class="post-header">Demo Post One</h2>
										<p class="post-meta">Author: <span class="spcolor">admin</span> May 5, 2014          Posted In: <span class="spcolor">Category1>></span></p>
										<div class="post-content">
												<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi augue metus, faucibus id est ac, rhoncus iaculis quam. Nam aliquam suscipit lacus, et pulvinar neque suscipit id. Phasellus lorem tellus, volutpat quis augue et, cursus euismod nisi. Sed at quam nec lacus blandit rhoncus. Etiam bibendum orci massa, vitae pellentesque libero vehicula quis. Proin tristique aliquam tincidunt. Sed euismod lorem ut est rutrum pretium. Ut sodales vitae nunc sit amet euismod. Aenean quis rutrum neque, sit amet ultrices dui. Integer velit neque, rutrum vel laoreet a, iaculis vitae tortor. Proin auctor vitae felis et lacinia. Vivamus congue ultrices interdum. Nam auctor fermentum felis, vitae viverra magna malesuada id.</p>
												<p>Vestibulum cursus laoreet quam, a ultricies neque vehicula sed. Cras porttitor condimentum lorem, at commodo nulla malesuada ut. Maecenas quis sapien consectetur, congue diam ut, pretium mi. Aliquam scelerisque placerat massa non interdum. Morbi ut venenatis mauris. Maecenas condimentum fermentum enim sed sagittis. Praesent pretium, diam eget tempor tempus, elit sem porta velit, sollicitudin feugiat mi mi ac velit. Nulla placerat lorem ac libero suscipit dictum. Nullam pharetra consectetur rutrum. Nam ullamcorper ligula purus, at pharetra velit consectetur et. Sed condimentum sapien vel magna auctor, non consectetur leo sollicitudin.</p>
												<p>Mauris aliquet quis sem ac blandit. Proin lobortis egestas risus nec tristique. Vivamus a congue lectus. Vestibulum sed tristique dui. Maecenas aliquet lorem non scelerisque interdum. Vivamus ligula risus, posuere et fringilla vel, gravida a turpis. Proin placerat ut risus eget luctus.</p>
												<p>Duis posuere erat vitae nulla vehicula, vitae gravida leo elementum. Ut sit amet justo eget tortor porta pulvinar. Nam non mauris nec lectus tempor porttitor. Cras odio odio, pharetra vel fermentum euismod, auctor sit amet risus. Nunc diam purus, scelerisque sed tincidunt a, consequat laoreet est. Duis consectetur adipiscing venenatis. Sed eget dolor nisi. Nam volutpat enim commodo, vulputate eros ac, placerat diam.</p>
										</div>
										<!-- End of div post content--> 
								</div>
								<!--end of div post--> 
						</div>
						<!--end of div main content--> 
				</div>
				<!-- end main-content-wrap -->
				<div id="sidebar">
						<div class="widget">
								<h1 class="wheader">MyWidgets</h1>
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
						</div>
				</div>
				<!-- end of div sidebar--> 
				
		</div>
</div>
</body>
</html>
7

Hello Paul,
I appreciate for all the help and valuable inputs.

Thanks
NewB

8

Hello Paul,
I hope you are doing good.

I just bothered you for little extra explanation on this part. What is the use of the CSS statement:

#content:after {/* contain floats*/
content:“”;
clear:both;
display:block;
height:0;
visibility:hidden;
}

Without this the page looks like this:

Secondly as you have said use :after to display a simple image instead of empty html element. I tried this:

#header:after {
background-image: url(“images/Flags.png”);
background-repeat:no-repeat;
height:327px;
width:930px
margin:0 auto;
}

But it does not displays the decoration image below the header.

Thanks
NB

9

That is a float containing technique because floats are removed from the flow and if a parent contains only floats it will have no height and its background and borders will not encompass the floated content.

The :after pseudo element works in tandem with the ‘content’ property to introduce content into a page via css. This introduces content inside the element but after the content (not after the element). For float containment we introduce some empty content - content:“”; - and then we set it to display:block otheriwse it will just be inline like text. Then we set it to clear:both so that it clears the floats above and that makes the parent recognise that floats have been cleared and now extends around all the content.

It’ basically the same as doing something like this but without actually using html mark up:


<div class="parent">
 <div class="float">float</div>
[B] <div class="clear:both"></div>[/B]
</div>

The :after element places some empty content after the float and clears it thus having the same effect as the div example. Google ‘clearfix’ for more examples.

Secondly as you have said use :after to display a simple image instead of empty html element. I tried this:

#header:after {
background-image: url(“images/Flags.png”);
background-repeat:no-repeat;
height:327px;
width:930px
margin:0 auto;
}

But it does not displays the decoration image below the header.

Thanks
NB

The :after pseudo element works in tandem with the content: property and if you don;t have the content property in your rule than there is no ‘box’ (i.e. content) to style. So in your rule you need to create an empty box and then set it to display:block.
content:" ";


#header:after {
[B]content:" ";[/B]
display:block;
background-image: url("images/Flags.png");
background-repeat:no-repeat;
height:327px;
width:930px
margin:0 auto;
}

More info here:

10

Hello Paul,
Thanks for all the help.

NewB