Forum Moderators: not2easy
Anyways, below you will find my code that I would like you to try and help me with. The main aim is to have a header (central), navbar (directly below it and central), container (following on directly and central) and a footer (the same as the rest).
The only thing I am having problems with is the container... I want to split it into 1 large left column and one small right column by using two extra divs. See if you can help me from my code.
(This is the html code)
------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Last attempt </title>
<link rel="stylesheet" type="text/css" href="important.css">
</style>
</head>
<body>
<div id="header">
<div id="headercol">Header content</div></div>
<div id="navbar">
<div id="navbarcol">Navbar content</div></div>
<div id="container">
<div id="column1"><h1>lorem ipsum dolor</h1>
<h2>duis autem</h2>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<div id="column2">Column 2 content</div></div>
<div id="footer">content here </div>
</body>
</html>
-----------------------------------------------------
(This is the external stylesheet)
-----------------------------------------------------
body {
margin: 0;
}
#header {
position: relative;
background-color: #399;
top: 0px;
left: 0px;
margin-right: 100px;
margin-left: 100px;
margin-top: 15px;
height: 60px;
}
#navbar {
position: relative;
background-color: #ccc;
top: 0px;
left: 0px;
margin-right: 100px;
margin-left: 100px;
height: 30px;
}
#container {
postion: relative;
background-color: #399;
top: 0px;
left: 0px;
margin-right: 100px;
margin-left: 100px;
border: 1px solid #000;
}
#footer {
position: relative;
background-color: #ccc;
top: 0px;
left: 0px;
height: 30px;
margin-left: 100px;
margin-right: 100px;
}
------------------------------------------------------
How would I split the container? I have tried using - relative and absolute positioning... as well as float.
p.s lol please note that the colours used are only for testing purposes. I only care about the container.
Then simply add float:right to the column 2 div.
You may need to play with the column 2 width and column 1's right margin but the float and changing the order of the div's in the markup should give you the simple 2 columns you are after.
