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 can you keep the “theme” of your website and add new dynamic pages? [closed]

    How can I use jquery to hide a drop down menu when the user clicks outside of the menu area?

    How to achieve this bevel button in CSS?

    How to use overflow-y:auto with child with bottom: 0 and position:absolute?

    Show div on hover span styling

    Icon with overhead label - how to get both to respond to hover, with CSS?

    How to align a

    into

    or when content it is dynamic?

    How to center a paragraph of text on a particular word in HTML, CSS, or JavaScript?

    How do i apply scroll for long horizontal background image?

    Does Modernizr.js help in showing css 3 and html 5 on older browsers and how?

    How to hover over the whole button in css

    How could I get a layout like the one shown in the attached image? [closed]

    How to decode data:image/png:base64… to a real image using javascript

    How to increase-decrease the number (i.e. 0, 1,4..) size in CSS?

    How can I properly create a contenteditable “Font Tester” type editor with CSS classes applied by JQuery?

    How to always show up pure HTML5/CSS modal window without clicking a link which activates it?

    How do i center the navigation menu and logo men using float?

    How make text before ul to come in single line in html?

    How to automatically validate after typing the input without using any frameworks, just simple code for my registration form?

    How to Obtain Contents of HTML Element in CSS

    How do I hide images that have a certain class when creating a pdf from html?

    How to debug IE print problem

    2 Sidebar Columns Layout (How)?

    How to change padding using php in options framework

    How to change font color of select2 control using css

    jQuery: How to get DIV to slide-off the screen and another to slide in?

    How to use CSS attribute selector for an SVG element with namespaced attribute href?

    css how to prevent content from drifting underneath fixed position areas?

    How would I replicate this input text effect where they're almost a merged box in CSS/HTML?

    how to select image using css