Search code examples
csshtmlsemantic-markup

Float div in top left without putting it on the first line

See this fiddle: http://jsfiddle.net/LGVKm/1/

For semantic and SEO reasons (and because i like it better) i want to put the aside element after my content in the document flow. But I want the aside to float left from the text, at the top. Any way to make that possible using css? Tried a lot.

I can always put the aside before the text div, but that puts it before the important content. Which i do not want. Or should i just swallow my pride and go the easy route. Would it matter to the search-engines. I imagine the aside element has a lower priority... nut not sure how html5-aware the spiders are...

And another semantic thing: I doubted using an article tag for the content, but i'm not sure about it. It's not like it's going to be distributed. Could replace the section for article, but section made more sense in my mind.

Solution

  • There is an CSS3 solution for this may be that's help you. For this you can use flexible property.

    .parent{
    display: -moz-box;
    display: -webkit-box;
    display: box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    -moz-box-direction: reverse;
    -webkit-box-direction: reverse;
    box-direction: reverse;
}
.parent div { 
    border: 1px solid blue;
    -moz-box-flex: 2;
    -webkit-box-flex: 2;
    box-flex: 2;
}
aside {
    width: 4em; 
    border: 1px solid red;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

    Check this http://jsfiddle.net/LGVKm/26/

    Read this https://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/