CODEWITHSUNDEEP
htmlcss
Lefka
Lefka

Reputation: 673

Aligning header using CSS without tables

I am new to CSS and I am trying to format the header of a new site. I have a logo that I want on the left and a title I want immediately after it. I have that working well but if I shrink the window, the text goes under the logo. I want the text to wrap instead. I can accomplish this very easily with tables but as I understand it, tables should be avoided in the layout of a page.

Here is the HTML:

<div class="image margin-right-5"></div>
<h1><%= siteName %></h1>

And the CSS:

.image {
    height: 2em;
    width: 200px;
    display: inline-block;
    background: url(../Images/main-logo.png) no-repeat left center;
}

h1, h3 {
    display: inline-block;
    font-weight: normal;
    font-size: 1.875em;
    vertical-align: super;
}

This is a scaled down version that shows what I want but is using tables. http://jsfiddle.net/1Lof58xd/

So how can I do this without using tables?

Upvotes: 0

Views: 93

Answers (1)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

Here you are http://jsfiddle.net/1Lof58xd/4/

You can make it with divs and add display table/table-cell to the elements or you can make it with with width of the children to occupy the parent div 100% width.

You can check the fiddle for the solutions :)

The HTML 

<div class="full">
    <div class="half">
        <img class="hdrimage" src="https://www.google.com/images/srpr/logo9w.png" />
    </div>
    <div class="half">
         <h1>Responsive Title to Wrap</h1>
    </div>
</div>

<h2>Display Table</h2>
<div class="table">
    <div class="table-cell">
        <img class="hdrimage" src="https://www.google.com/images/srpr/logo9w.png" />
    </div>
    <div class="table-cell">
         <h1>Responsive Title to Wrap</h1>
    </div>
</div>

The CSS

.full {
    width: 100%;
    overflow: hidden;
}
.half {
    width: 50%;
    float: left;
}
.hdrimage {
    max-width: 100%;
}

/* With Display table/table-cell */
.table{
    display: table;
    width: 100%;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 1

Related Questions