CODEWITHSUNDEEP
css
Kristiyan Nikolov
Kristiyan Nikolov

Reputation: 1

CSS positioning - a div won't go to the next line

The div #leftcol won't go below the navigation panel. Dreamweaver shows it as if #leftcol and #navigation are the same div. I am an absolute newbie so any help is greatly appreciated. Here is the 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

#container {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    width: 800px;
    margin: 0 auto;
    border: 1px solid #FC3; 
}

#header h1 { 
    float: right;
    padding-right: 150px;
    padding-top: 50px;
}

#navigation {
    border-left: 1px solid #FC3;
    border-right: 1px solid #FC3;
    border-bottom: 1px solid #FC3;
}

#navigation ul {
    margin: 0;
}

#navigation ul li {
    display:inline;
}

#navigation ul li a {
     display: block;
     padding: 5px;
text-decoration: none;
     float: left;
}

#navigation ul li a:hover {
     background-color: #cadb2b;
}

#navigation ul li a:visited {
     background-color: #cadb2b;
}

#leftcol {
     width: 200px;
     background: #cadb2b;
     border: 1px solid black;
     clear: both;
}

</style>
</head>

<body>
<div id="container">
  <div id="header">
  <img src="header" />
  <h1>Some Title!</h1>
  </div>
  <div id="navigation">
  <ul>
  <li><a href="nova.html">Home</a></li>
  <li><a href="#">About</a></li>
  <li>Gallery</li>
  <li>Contacts</li>
  </ul>
  </div>
  <div id="leftcol">Content for  id "leftcol" Goes Here</div>
</div>
</body>
</html>

Also, I didn't know how to position the <h1> next to the picture so I floated it to the right and then positioned it with padding. Is this the correct method for positioning the title next to the header? Thanks in advance. PS. As a new user, I had to remove two of the links in my navigation and my header picture, so don't mind if it looks weird.

Upvotes: 0

Views: 1839

Answers (1)

Ayush
Ayush

Reputation: 42450

Is this what you have in mind. I'm not entirely sure what it is you intend for, so if I'm wrong, see my comment under your question.

http://jsfiddle.net/9hqCK/1/

If you don't want leftcol to take up the entire width of the page, add the following property to #leftcol

width:250px;

Change the width to what suits you.

Upvotes: 2

Related Questions