Home/ Questions/Q 9246739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T09:33:45+00:00

I am trying to make a header for a site that has a logo

  • 0

I am trying to make a header for a site that has a logo in the left column, and a rotating image banner and the top-level navigation on the right, without using floats. What am I doing wrong here?

This is what I would like it to look like:

enter image description here

Here is my HTML:

<!doctype html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
    <div id="logo"><p>Logo</p></div>
    <div id="right">    
        <div id="rotator"><p>Rotator</p></div>
        <div id="navigation"><p>Navigation</p></div>
    </div>
</div>
</body>
</html>

Here is my CSS:

#header{
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
    top: 10px;
    font-size: 0px;
}
#logo{
    display: inline-block;
    background-color: red;
    width: 306px;
    height: 192px;
    font-size: 0px;
}
#right{
    display: inline-block;
    background-color: black;
    width: 718px;
    height: 192px;
    font-size: 0px;
}
#rotator{
    display: block;
    background-color: green;
    width: 718px;
    height: 132px;
}
#navigation{
    display: block;
    background-color: blue;
    width: 718px;
    height: 60px;
}
p{
    font-size: 24px;
    margin:0;
    padding: 0;
}

This is what it ends up looking like:
enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try putting vertical-align: top; on the logo and right divs

    Here’s the fiddle

    #logo{
display: inline-block;
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
vertical-align: top;

    }

    #right{
display: inline-block;
background-color: black;
width: 718px;
height: 192px;
font-size: 0px;
vertical-align: top;

    }

    • 0