CODEWITHSUNDEEP
htmlcsslayoutseo
jeff
jeff

Reputation: 13653

How to change order of divs in HTML code, for 3-column CSS Layout?

I found a good CSS code that makes a 3-column layout, from here. But the problem is, HTML code must be in this order : 

<div class='left'></div>
<div class='right'></div>
<div class='content'></div>

and for SEO purposes, I want to put content first. But it breaks the layout. Please see the demo.

So how can I make it work with all orderings? Or just the one (2-1-3) ordering ?

Thanks for any help !

Upvotes: 2

Views: 752

Answers (2)

web-tiki
web-tiki

Reputation: 103780

You can use position:absolute; (don't forget to set the container to position:relative;):

FIDDLE

CSS:

.threecolumns_container {
    width: 750px;
    margin:auto;
    position:relative;
}

.threecolumns_left {
    float: left;
    width: 150px;
}

.threecolumns_content {

    width:396px;
    position:absolute;
    left:150px;
}

.threecolumns_right {
    float: right;
    width: 200px;   
}

.threecolumns_clear {
    clear: both;
}


/* demo : 
----------*/
.threecolumns_container
{
    background-color:rgba(25,2,2,0.1);
}

.threecolumns_left
{
    border:1px solid red;
}
.threecolumns_content
{
    border:1px solid green;
}
.threecolumns_right
{
    border:1px solid blue;
}

Upvotes: 1

2dar
2dar

Reputation: 651

Try this : change the css for .threecolumns_content :

.threecolumns_content {

    float:left;
    width:391px;
}

Upvotes: 1

Related Questions