Forum Moderators: not2easy
My issue is that the right column is posting below the left colum.
PLEASE HELP!
here is my code
CSS:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 1100px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
height: 100px;
margin: 10px 0px 5px 0px;
background: white;
}
#navigation {
float: left;
width: 900px;
height: 25px;
color: #333;
padding: 10px;
margin: 0px 0px 5px 0px;
background: white;
}
#navigation2 {
float: center;
width: 900px;
color: #333;
padding: 10px;
margin: 0px 0px 5px 0px;
background: white;
}
#leftcolumn {
color: #333;
background: white;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 185px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
background: white;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 678px;
display: inline;
position: relative;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/picture.css" />
<link rel="stylesheet" type="text/css" href="css/main_horizontal_navigation.css" />
<link rel="stylesheet" type="text/css" href="css/vertical_navigation.css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<div id="header">
<center>
<img src="WebBanner/Web_Banner_pictures.jpg">
</center>
</div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation">
PAGE NAVIGATIOn
</div> <!--End navigation-->
<!-- Begin Left Column -->
<div id="leftcolumn">
PICTURE GALLERY NAVIGATION
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<center>
<img src="ics/test.jpg">
</center>
</div>
<!-- End Right Column -->
</div>
<!-- End Wrapper -->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PAGE NAVIGATIOn</title><style type="text/css">
* { padding: 0; margin: 0; }body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}#wrapper {
margin: 0 auto;
width: 900px;
}#header {
color: #333;
width:100%;
height: 100px;
background: blue;
}#navigation {
width: 100%;
color: #333;
background: red;
}#leftcolumn {
float: left;
color: #333;
background: yellow;
width: 30%;
}#rightcolumn {
float: left;
color: #333;
background: green;
width: 70%;
}</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper"><!-- Begin Header -->
<div id="header">
<img src="WebBanner/Web_Banner_pictures.jpg">
</div>
<!-- End Header --><!-- Begin Navigation -->
<div id="navigation">PAGE NAVIGATIOn
</div> <!--End navigation-->
<!-- Begin Left Column -->
<div id="leftcolumn">PICTURE GALLERY NAVIGATION
</div>
<!-- End Left Column --><!-- Begin Right Column -->
<div id="rightcolumn">
<p>Some text</p>
<img src="ics/test.jpg"></div>
<!-- End Right Column --></div>
<!-- End Wrapper -->
</body></html>
I've added colours so you can see what's going on.
Disclaimer, I'm also learning CSS so there are probably much better ways to do this!
