Pure CSS Designing over using Tables...

Associate
Joined
3 Oct 2006
Posts
2,304
Location
London
...Is a royal pain in the backside and I'm so tempted to go back to using tables!

Incase you hadn't noticed I'm new to this whole CSS lark, but really want to stick with it. I thought I had everything working, but then I've stumbled upon a few problems!

Firstly : I got it looking like this:



Great I thought, this CSS lark is easy....then I filled the 'mainbody' with more Lorum Ipsum giving me this nice little glitch:



I know why this is happening, it's because I have the div containing image on the right at a set height, but after trying auto and inherit, neither would automatically stretch it. Is it even possible to do this?

Then I moved onto IE (with a little Lorum Ipsum):



My initial thoughts were *oh fuggles*.... Something is majorly wrong there!

Finally, I put lots of Lorum Ipsum in IE, and things got a little bit better, but not perfect!



Can anyone give me a helping hand? If I can't get these fixed I may just have to go back to tables!

test.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />  

</head>

<body>

<div id="wrapper"><!-- class wrapper begin -->
	
	<div id="warningstriptop">
	</div>
	<!-- Tab 1 Top -->
	<div id="toptabtop">
	</div>
	<div id="warningstripbottom">
	</div>
	<!-- Tab 1 Middle-->
	<div id="toptabmiddle">
		<div id="tab">
			Tab 1<br />Content Goes Here
		</div>
	</div>
	
	<div id="mainbody">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam commodo lectus. Morbi id lorem sit amet ipsum tempor consectetuer. Fusce sapien. Nullam sapien. In congue adipiscing velit. Aenean congue pellentesque dolor. Duis consequat hendrerit lacus. Etiam adipiscing. Vivamus euismod tincidunt nisi. Pellentesque ornare turpis id enim. Proin congue. Nulla vitae erat porta erat fringilla vestibulum. Fusce sed magna. Nullam sit amet erat. Nulla metus erat, placerat ac, auctor luctus, ornare sit amet, ipsum.

	
	
	</div>
	
	<div id="tabbottom">
	</div>
	
	<!-- Tab 2-->
	<div id="tabtop">
	</div>
	<div id="tabbody">
		<div id="tab">
			Tab 2<br />Content Goes Here
		</div>
	</div>
	<div id="tabbottom">
	</div>
	
	<!-- Tab 3-->
	<div id="tabtop">
	</div>
	<div id="tabbody">
		<div id="tab">
			<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam commodo lectus. Morbi id lorem sit amet ipsum tempor consectetuer. Fusce sapien. Nullam sapien. In congue adipiscing velit. Aenean congue pellentesque dolor. Duis consequat hendrerit lacus. Etiam adipiscing. Vivamus euismod tincidunt nisi. Pellentesque ornare turpis id enim. Proin congue. Nulla vitae erat porta erat fringilla vestibulum. Fusce sed magna. Nullam sit amet erat. Nulla metus erat, placerat ac, auctor luctus, ornare sit amet, ipsum.</span>
		</div>
	</div>
	<div id="tabbottom">
	</div>
	<div id="rightsidebottom">
	</div>
	
	<div id="footer">
		<div id="footerleft">
		</div>
		<div id="footerright">
		</div>
	</div>
</div><!-- class wrapper end -->

</body>
</html>

styles.css
Code:
/* CSS Document */

body {
	background-color:#8DC1EC;
	font-family: verdana, arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #6F6F6F;
	font-style: normal;
	text-decoration: none;
	margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
	text-align:center; /* Hack for IE5/Win */
}


/* CSS Layout! */

#wrapper {
	width: 983px;
	margin: 0px auto; /* Right and left margin widths set to "auto" */
	text-align: left; /* Counteract to IE5/Win Hack */
	padding: 0px;
	border: none;
	background-color: #8DC1EC;
}
#warningstriptop {
	background-image: url(../images/warningstriptop.gif);
	width: 753px;
	height: 19px;
	float: left;
}
#warningstripbottom {
	background-image: url(../images/warningstripbottom.gif);
	width: 753px;
	height: 18px;
	float: left;
}
#toptabtop {
	background-image: url(../images/toptabtop.gif);
	width: 230px;
	height: 19px;
	float: right;
}
#toptabmiddle {
	background-image: url(../images/toptabmiddle.gif);
	width: 230px;
	height: 168px;
	float: right;
	overflow: hidden;
}
#mainbody {
	background-image: url(../images/mainbody.gif);
	background-repeat:repeat;
	width: 718px;
	min-height: 781px;
	float: left;
	padding-right: 20px;
	padding-left: 15px;
}

#tabtop {
	background-image: url(../images/tabtop.gif);
	width: 230px;
	height: 19px;
	float: right;
}
#tabbody {
	background-image: url(../images/tabbody.gif);
	width: 230px;
	height: 168px;
	float: right;
	overflow: hidden;
}
#tabbottom {
	background-image: url(../images/tabbottom.gif);
	width: 230px;
	height: 19px;
	float: right;
}
#tab {
	margin-left: 30px;
	width: 185px;
	overflow:hidden;
}
#rightsidebottom {
	background-image: url(../images/news_r5_c4.jpg);
	float: right;
	height: 200px;
	width: 230px;
}
#footer {
	height: 38px;
	width: 983px;
	float: left;
}
#footerleft {
	background-image: url(../images/news_r7_c2.jpg);
	height: 38px;
	width: 753px;
	float: left;
}
#footerright {
	background-image: url(../images/news_r7_c4.jpg);
	height: 38px;
	width: 27px;
	float: left;
}
 
Soldato
Joined
12 Jan 2004
Posts
3,172
Location
Brighton
Dude, start putting divs *inside* each other, then they will stretch when they are filled with content.

Divs are not like table rows/columns, they are just areas, boxes.
 
Soldato
Joined
28 Jan 2005
Posts
3,732
Location
Worcester
I've made the layout appear as you want. Hopefully you can just add in the extra things you need.

HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css" media="screen" />  
</head>
<body>
<div id="mainContainer">
	<div id="mainLeft">
		<div id="warningStrip"></div>
			<h1>This is my Website</h1>
			<h2>This is my test layout using CSS so I don't have to use nasty tables.</h2>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam commodo lectus. Morbi id lorem sit amet ipsum tempor consectetuer. Fusce sapien. Nullam sapien. In congue adipiscing velit. Aenean congue pellentesque dolor. Duis consequat hendrerit lacus. Etiam adipiscing. Vivamus euismod tincidunt nisi. Pellentesque ornare turpis id enim. Proin congue. Nulla vitae erat porta erat fringilla vestibulum. Fusce sed magna. Nullam sit amet erat. Nulla metus erat, placerat ac, auctor luctus, ornare sit amet, ipsum.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam commodo lectus. Morbi id lorem sit amet ipsum tempor consectetuer. Fusce sapien. Nullam sapien. In congue adipiscing velit. Aenean congue pellentesque dolor. Duis consequat hendrerit lacus. Etiam adipiscing. Vivamus euismod tincidunt nisi. Pellentesque ornare turpis id enim. Proin congue. Nulla vitae erat porta erat fringilla vestibulum. Fusce sed magna. Nullam sit amet erat. Nulla metus erat, placerat ac, auctor luctus, ornare sit amet, ipsum.</p>
		<div id="mainFooter"></div>
	</div><!-- end of mainLeft -->
	<div id="mainRight">
		<div class="mainTab">
			<div class="tabTop"></div>
				<div class="tabBody">
				<h3>Tab 1</h3>
				<p>Content goes here.</p>
				</div>
			<div class="tabBottom"></div>
		</div>
		<div class="mainTab">
			<div class="tabTop"></div>
				<div class="tabBody">
				<h3>Tab 2</h3>
				<p>Content goes here.</p>
				</div>
			<div class="tabBottom"></div>
		</div>
		<div class="mainTab">
			<div class="tabTop"></div>
				<div class="tabBody">
				<h3>Tab 3</h3>
				<p>Content goes here.</p>
				</div>
			<div class="tabBottom"></div>
		</div>
	</div><!-- end of mainRight -->
</div><!-- end of mainContent -->		
</body>
</html>

CSS
Code:
*, html, body{margin: 0; padding: 0;}

body {
	background-color:#8DC1EC;
	font-family: verdana, arial, Helvetica, sans-serif;
	font-size: .8em;
	color: #6F6F6F;
	font-style: normal;
	text-decoration: none;
	text-align:center; /* Hack for IE5/Win */
}

h1, h2, h3, p{padding: 5px;}

#mainContainer{
	width: 983px;
	height: auto;
	margin: 10px auto;
	padding: 0;
	color: #6f6f6f;
	background-color: #8dc1ec;
	text-align: justify;
}

#warningStrip{
	background: #ffff00 url(../images/warningstriptop.gif) no-repeat;
	width: 733px;
	height: 19px;
}

#mainLeft{
	width: 733px;
	height: auto;
	background-color: #fff;
	color: #6f6f6f;
	float: left;
}

#mainRight{
	width: 230px;
	height: auto;
	float: right;
	margin-left: 20px;
}

.mainTab{
	width: 230px;
	height: auto;
	color: #000;
}

.tabTop {
	background: url(tab.gif) no-repeat; /* Change the URL */
	width: 230px;
	height: 19px;
	float: right;
}

.tabBody {
	background: url(middle.gif); /* Change the URL */
	width: 230px;
	height: 168px;
	float: right;
	overflow: hidden;
}

.tabBottom {
	background: url(tab.gif) no-repeat; /* Change the URL */
	width: 230px;
	height: 19px;
	float: right;
	margin-bottom: 5px;
}

#mainFooter {
	width: 733px;
	height: 38px;
	background-color: #0066ff;
	clear: both;
}
 
Last edited:
Soldato
Joined
28 Jan 2005
Posts
3,732
Location
Worcester
You're right, but I'm in a giving mood. :)

Anyway, he still has to add and change things. Hopefully seeing how it is done will make it easier to understand.
 
Associate
Joined
18 Oct 2002
Posts
1,413
Location
Brisbane, Australia
keep going with the CSS, dont revert to tables.tables are for structured data, not for layouts. move forth and conquer, not long and you`ll be messing about with dom scripting, following the path the i think even berners lee wanted us to head down.

follow web standards and the W3C.
 
Associate
OP
Joined
3 Oct 2006
Posts
2,304
Location
London
I'm getting there slowly, I see and understand how it has been organised, which is fine. However, because of the design and the tabs having a stupid little fadey bit etc, getting it to look like the PSD file is proving to be a pain.

I'm getting there slowly though!
 
Associate
Joined
21 Sep 2003
Posts
1,298
Location
Leicester
Diskbox said:
keep going with the CSS, dont revert to tables.tables are for structured data, not for layouts. move forth and conquer, not long and you`ll be messing about with dom scripting, following the path the i think even berners lee wanted us to head down.

follow web standards and the W3C.
Great advice here, css is really awesome when you get the hang of it!

Its true that the cross browser compatibility is very annoying especially with IE always deciding to mess about with padding and margins, but its worth it!
 
Back
Top Bottom