HTML5 - Show Items Side By Side


Tags: html,css,html5,css3

Problem :

I am new to HTML/CSS so I am creating a simple website to learn how it works.

I have a header that contains the website name and a collection of links. I'd like to format it so that they are side by side. (Similar to StackExchange, as seen above. The website name to the left, links to the right).

I've included my current markup below but it doesn't appear to be doing anything. I suspect I'm using CSS classes and subclasses incorrectly or I have the concept wrong. Can someone point out any errors I might have made or point me to a resource for further reference? Any help would be appreciated. Thanks!

Edit: I want the website name above the the slogan, to the right and the links to the left.

CSS

header 
{
    clear:both;
}

header .section 
{
    float:left;
}

header .nav 
{
    float:right;
}

HTML

<header>
        <section>
            <h1>My Website</h1>
            <p>My Slogan</p>
        </section>
        <nav>
            <a href="#">Link A</a> | 
            <a href="#">Link B</a>
        </nav>
</header>
<article>
    My website contents
</artcile>

Answered

There were multiple correct answers but I can unfortunately only mark one as correct. The correct answer was to remove the dots in ".section" and ".nav" as well as to set the header to overflow:auto rather than clear:both. Thanks everyone!



Solution :

You want something like this, right?

header {
    overflow:auto;
}

header section {
    float:left;
}
header nav {
    float:right; /* or left */
}

jsFiddle here

As mentioned in the comments, you use header as opposed to .header, section as opposed to .section, nav instead of .nav.

The . is used to reference classes.

overflow:auto will make the parent contain the child, since a height isn't set on it.


    CSS Howto..

    How do I set the table row heights to minimum except last row?

    how to highlight currently opened page link in css

    how to creating a separator line which is always in the middle (center)

    How to vertically align images inside a list

    How to style HTML select option hover and selected option effects

    CSS: How to get an animated gif background-image on top of a div

    Css how to replace block after click button

    How to Get Multiple elements to change color on hover CSS?

    css - how to get floated divs to stack when you zoom in

    How do I use this CSS animation in my HTML file?

    How to match element containing another element?

    How can I adjust image width and height to 100 x 100 keeping ratio?

    jQuery - How to aply custom CSS to fields which are not empty

    How do I get started with jQuery? [closed]

    How to change font color of select2 control using css

    How to bundle Angular 2 component css?

    CSS : how to center a input inside a div

    How do I remove the text underline (that I set myself) from a on hover?

    How to create a Line Item with vertical middle aligned text?

    Class inside of Div not showing properly

    Ajax control toolkit combobox showing weird bullets in dropdown

    CSS: How to align text, next to image inside a span?

    HTML & CSS: Vertical Flow Layout (columnar style), how to implement?

    How to hide the div on click through animation css

    How to apply IE Fixes for LESS CSS [closed]

    How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?

    How to highlight one image over other using jquery css? [duplicate]

    HTML/CSS: How to get some text to align on right and other text on left on same line of table cell

    how to make cross browser css ellipsis?

    How to Over ride youtube external style?