CODEWITHSUNDEEP
htmlcss
Maria Ines Parnisari
Maria Ines Parnisari

Reputation: 17496

Create header of webpage with three columns

This is in style.css:

#top{
    background: white;
    text-align: center;
    height: 180px;
    border-bottom: solid 1px #efeecc;
}

#topLogo{
    background: yellow;
    width: 25%;
    float:left;
}

#topDescription {
    background: red;

    width: 75%;
    text-align: center;
}

#topDepartment {
    background: blue;
    float:right;
    width: 25%;
    text-align: right;
}

This is index.html:

<div id="top">
    <div id="topLogo">
        <a href="index.html"><img src="img/book.jpg" width="170" height="160" border="0"/></a>
    </div>
    <div id="topDescription">
        Page title
    </div>
    <div id="topDepartment">
        Category        
    </div>
</div>

This is the expected outcome: enter image description here

This is the current outcome: enter image description here

http://jsfiddle.net/p2T5q/

Upvotes: 1

Views: 81

Answers (3)

AdityaSaxena
AdityaSaxena

Reputation: 2157

Here's a demo: http://jsfiddle.net/p2T5q/7/

CSS:

#top{
    background: white;
    text-align: center;
    display:table;
    height: 180px;
    border-bottom: solid 1px #efeecc;
}

#topLogo{
    background: yellow;
    width: 25%;
    display:table-cell;
}

#topDescription {
    background: red;
    display:table-cell;
    width: 50%;
    text-align: center;
}

#topDepartment {
    background: blue;
    display:table-cell;
    width: 25%;
    text-align: right;
}

enter image description here

Upvotes: 2

Marz
Marz

Reputation: 381

Here you go, I fixed the fiddle and copied the answer here:

http://jsfiddle.net/p2T5q/2/

#top{
    height: 180px;
    border: solid 1px #555555;
    position:relative;
}
#top * {
    float:left;
}
#topLogo{
    background: yellow;
    width: 25%;
}
#topDescription {
    background: red;
    width: 50%;
}
#topDepartment {
    background: blue;
    width: 25%;
}

Basically make sure the width percentages add up to 100% and float all elements to left so they know in relation to what they should position themselves. You can use the * to select all subelements. I would appreciate you accepting this answer so I can finally get my 50 damn coins and make comments, lol.

Upvotes: 0

MikesBarto2002
MikesBarto2002

Reputation: 173

Well, the quick answer is that your div's total width is 125%, so you would need to change that so it equals 100%.

Second, you might want to put a clear fix on that top div so it encompasses all of the floating ones.

Also, don't use inline styles because you can put them in the CSS file. You are giving a fixed width to an image that sits inside a div with a percentage width. That is sure to break if the user reduces the size of his viewport.

Upvotes: 0

Related Questions