Design a webpage header featuring three separate columns

Question

Design a webpage header featuring three separate columns

The style.css file includes the following code:

#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 how it appears in the index.html file:

<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>

Expected outcome:

Current outcome:

http://jsfiddle.net/p2T5q/

html css

Answer 1

Answer №1

Check out this demonstration here: http://jsfiddle.net/p2T5q/7/

Cascading Style Sheets:

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

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

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

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

Answer 2

Check out this demonstration here: http://jsfiddle.net/p2T5q/7/

Cascading Style Sheets:

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

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

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

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

Answer 3

Answer №2

To simplify, the width of your div is currently set to 125%, so adjusting it to 100% would be necessary.

Additionally, consider adding a clear fix to the top div in order to properly contain all floating elements.

Avoid using inline styles and instead incorporate them into the CSS file. Setting a fixed width for an image within a div with percentage width may lead to issues when the user resizes their viewport.

Answer 4

To simplify, the width of your div is currently set to 125%, so adjusting it to 100% would be necessary.

Additionally, consider adding a clear fix to the top div in order to properly contain all floating elements.

Avoid using inline styles and instead incorporate them into the CSS file. Setting a fixed width for an image within a div with percentage width may lead to issues when the user resizes their viewport.

Answer 5

Answer №3

Here is the updated solution with the corrected fiddle link and answer:

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%;
}

Ensure that the total width percentages sum up to 100% and float all elements to the left for proper positioning in relation to each other. Utilize the * selector to style all subelements. Kindly consider marking this as the accepted answer so I can earn my well-deserved coins and leave some additional remarks. Thank you!

Answer 6

Here is the updated solution with the corrected fiddle link and answer:

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%;
}

Ensure that the total width percentages sum up to 100% and float all elements to the left for proper positioning in relation to each other. Utilize the * selector to style all subelements. Kindly consider marking this as the accepted answer so I can earn my well-deserved coins and leave some additional remarks. Thank you!

Design a webpage header featuring three separate columns

Answer №1

Answer №2

Answer №3

Similar questions

utilizing Javascript to display file contents within a textarea

What is the best way to display a calendar for a read-only data input field?

Adding HTML created by PHP to a document fragment

What is the best way to display the JSON array received from Postman on my HTML page using jQuery's Ajax success function?

Tips for achieving vertical alignment of a Bootstrap 4 Carousel slide while it transitions

Combining the jquery-UI slider functionality with the canvas rotate() method

Moving images displayed on a webpage

The autocomplete feature is situated quite a bit lower than the input box

How about linking together CSS3 animations?

Enhance the HTML5 Canvas arc by redrawing it upon hover

What is the best approach to prevent automatic zoom on a mobile-responsive website?

Issues with external javascript link functionality

Utilize the Step Function in Jquery to create animated rotation at a specific degree angle

What could be causing a link anchor within a div with a lower z-index to be clickable in Internet Explorer on Windows Phone 7?

When the IFRAME is resized, it actually returns the width of the window, not its own width

Toggle menu on the left side, similar to Facebook's layout

Alter the background color of a table cell in Angular HTML depending on a boolean value

Instantly see changes without having to manually refresh the screen

Scrolling on an iPhone's Div

If the width is below 767, the previous code will not be effective in jQuery