Menu
Community /Pin to ProfileBookmark
@NogDogAug 31.2005 — #
Me + css =problems
Hello, nice to see such a helpful community.
I was hoping someone could help me with this, I’m creating a page wich has a, container (duh), three article boxes and a menu, since I’m not a css wizard I was hoping someone could explain a few things in word’s that a dummy like me would understand.
Ok, I’ve been trying to implement the two top article boxes using padding, these are supposed to be on the same horizontal line, but the second box keeps falling either below or to far away.
Im only using css, I read somewhere tables would slow down the loading period.
The setup is like this:
[upl-file uuid=6ce76c84-7415-493c-9177-0cda618206f6 size=5kB]Layout.png
Sign in
to post a comment4 Comments(s) ↴
0
@NogDogAug 31.2005 — #[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Sample Layout</title>
<style type="text/css">
<!--
body {
background-color: gray;
margin: 0;
padding: 10px;
font: medium arial, sans-serif;
}
div, #nav {
background-color: white;
color: black;
padding: 9px;
border: solid 1px black;
}
#container {
width: 770px;
margin: 0 auto;
padding: 0;
border: none;
background-color: transparent;
}
#head {
text-align: center;
margin: 0;
padding: 10px;
margin-bottom: 5px;
}
#nav {
list-style: none;
float: left;
width: 150px;
margin: 0;
background-color: white;
height: 300px;
overflow: auto;
}
#left, #right {
float: left;
margin-left: 5px;
width: 275px;
height: 300px;
overflow: auto;
margin-bottom: 5px;
}
#bottom {
clear: both;
margin-left: 175px;
margin-top: 5px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="head">
<h1>Title Goes Here</h1>
<h2>This Is a Sub-Title</h2>
</div> <!-- head -->
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<div id="left">
<h3>Left Column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
</div>
<div id="right">
<h3>Right Column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
</div>
<div id="bottom">
<h3>Bottom Section</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin imperdiet
est nec massa lacinia iaculis. Phasellus urna lectus, vehicula vitae, rhoncus
non, posuere sed, felis. Vivamus mauris. Cras adipiscing interdum enim. Nunc a
mi. Fusce vel ligula et ante venenatis adipiscing. Curabitur cursus felis a
ligula. Phasellus sed nunc at nisl pellentesque fermentum. Etiam commodo. Ut
quis velit. Donec pulvinar augue sed pede.</p>
</div>
</div> <!-- container -->
</body>
</html>
[/code]