Css layout

HTML & CSS
1

Hi,

I am new to css and learning about css layout.
I am trying to layout the 2 divs to be next to one another horizonatlly but with not much luck.

at the moment I got simple html body with 3 divs.


<body>
  <div id="main">
    <div id="logo">
      <img src="images\\logo.gif">
    </div>
    <div id="nav">
      <img src="images\\logo.gif">
    </div>
  </div>
</body>



#main
{
  background-color: red;
  padding: 10px;
}

#logo
{
  padding: 5px;
  background-color: green;
  width: 300px;
}

#nav
{
  padding: 5px;
  background-color: blue;
  width: 300px;
}

for simplicity I put image instead of list of menu at this stage.

when I run it on the web div nav is displayed below div logo.
I have tried to put display: in-line on div main to try to force div logo and div nav to display on the same line, I have tried to use float right on div nav, I have tried inline-block on div main as well, but I can’t seems to change the orientation to horizontal.

what I would like to do is to display logo on the left and on the right of the logo to display navigation menu. I only try to build small website at the moment so it only has 4 or 5 item on navigation, so it should be a very simple layout for me to learn and build using css.

I appreciated if you can point me in the right direction on what I did wrong or where to look.

I am also curious with the introduction of div and css lots of article on the net seems to indicate that not to use table for layout but use div instead, is that mean using table for layout the page is now obselete?, or there is a certain case still better to use table and other case better to use div?, if this is the case then when to use table and when to use div?

Thank you in advance.

Regards

  • Haris -
2

when I run it on the web div nav is displayed below div logo.
I have tried to put display: in-line on div main to try to force div logo and div nav to display on the same line, I have tried to use float right on div nav, I have tried inline-block on div main as well, but I can’t seems to change the orientation to horizontal.
Hi Haris, Welcome to SitePoint :slight_smile:

Divs are block level elements that stack vertically, you would need to float both of your elements left to get them on the same line. Actually you could just float one but IE will present some bugs so it is best to float them both.

If your right side is going to be a nav then you can just style the UL, there’s no need to wrap a div around it.

Let me see if I can make a quick example for you. Will your nav links be stacked or sitting beside each other? You had your nav at 300px wide so I assume the list items will be stacked.

I am also curious with the introduction of div and css lots of article on the net seems to indicate that not to use table for layout but use div instead, is that mean using table for layout the page is now obselete?, or there is a certain case still better to use table and other case better to use div?, if this is the case then when to use table and when to use div?
Tables are not obsolete but they should not be used for page layout. They should only be used with true tabular data.

In a very basic layout what you were wanting to do would look something like this. If you wanted the list items beside each other we would need to float them and adjust/remove the width from nav.

<!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=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
#main {
    min-width:320px;
    padding: 10px;
    overflow:hidden;/*contain child floats (haslayout IE7)*/
    background: red;
}
* html #main { /*IE6 haslayout/overflow reset*/
    height:1%;
    overflow:visible;
}
#logo {
    float:left;
    width: 310px;
    padding: 5px;
    background: lime;
}
#nav {
    float:left;
    width: 300px;
    margin: 0;
    padding: 0 0 0 20px;
    background: orange;
}
</style>

</head>
<body>

<div id="main">
    <div id="logo">
        logo
    </div>
    <ul id="nav">
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</div>

</body>
</html>
3

Hi Ray,

Thank you for the reply, can you tell me how do I bottom align the div logo and the ul element, at the moment the logo div and ul element seems to be top aligned.

I try to put vertical-align: bottom at main div and take out margin: 0 on nav element but it doesn’t seems to work. I also play around with different position command on logo, it doesn’t seem want to bottom aligned with the list?

Could you tell me what is a good starting point for me to learn the css, please.
I think at the moment it’s a bit hard to grasp since I miss the css fundamental/concept, like what’s need to be wrap by div and what’s not, basic layout control command for css, etc…

I have look at some w3c css-layout documentation, it seems to be a very powerful thing since it can do grouping, etc as well as looking at article from the net; since the info seems to be bit and pieces every where it confuses me more.

I look at the 2 courses intro at sitepoint but unfortunately the courses are already started so not sure when the next course will be and look at table of content on some of css books on this site as well but not sure it explain for beginer to understand the concept of css and the layout.

Could you recommend me where should I start, please.
I am more of a visual person so if it give command or concept and show example then I can see it then I can understand it better than reading pages of reference manual since I haven’t have the basic understanding yet.

Thank you.

Regards

  • Haris -
4

I try to put vertical-align: bottom at main div and take out margin: 0 on nav element but it doesn’t seems to work. I also play around with different position command on logo, it doesn’t seem want to bottom aligned with the list?
Hi,
Vertical-align only applies to inline elements and tables. If your heights are unknown on the logo and nav you could set them as inline-blocks and then use vertical-align:bottom

Could you recommend me where should I start, please.
The SitePoint CSS Reference is a good place to start learning, keep hanging around these forums too and you will learn a lot also. :slight_smile:

Using Inline-Block for logo and nav:


<!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=utf-8">
<title>Test Page</title>
 
<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
#main {
    min-width:320px;
    padding: 10px;
    overflow:hidden;/*contain child floats (haslayout IE7)*/
    background: red;
}
* html #main { /*IE6 haslayout/overflow reset*/
    height:1%;
    overflow:visible;
}
#logo {
    width: 310px;
    padding: 5px;
    background: lime;
}
#nav {
    width: 300px;
    margin: 0;
    padding: 0 0 0 20px;
    background: orange;
}
.inline-blk {
    display:inline-block;
    vertical-align:bottom;
}
* html .inline-blk {display:inline}  /*IE6*/
*+html .inline-blk {display:inline} /*IE7*/
</style>
 
</head>
<body>
 
<div id="main">
    <div id="logo" class="inline-blk">
        logo
    </div>
    <ul id="nav" class="inline-blk">
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</div>
 
</body>
</html>