CODEWITHSUNDEEP
htmlcss
markb
markb

Reputation: 1295

Fixed and fluid columns

So I'm trying to create a full width webpage, that when the browser scales down from a large display to medium, a sidebar collapses, then when the display is the width of the main content, the sidebar drops below the content (I'll explain with pictures).

I've created this JSFiddle: http://jsfiddle.net/7N2Jr/2/

In it there is a fixed sidebar - the main navigation. Also there is the div.inside which holds all the content. <article class="one"> holds the main content (the news article), while <article class="two"> will hold related posts, adverts, and the like.

What I intend to create is (excuse the fiddle not being large enough to show this):

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Upvotes: 0

Views: 72

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105893

<edit> You could use float as a fallback for the flexbox http://jsfiddle.net/7N2Jr/8/ </edit>

If you do not mind using flexbox , for younger browser only, you could give it a try : DEMO 

.inside, article.two{
    display:flex;
    padding:1em;
    flex-wrap:wrap;
}
.inside, article {
    background:rgba(0,0,0,0.3);
    margin:1em;
}
article.one {
    flex:3;
    min-width:800px;
}
article.two {
min-width:200px;
}
.filler {
    min-width:200px;
    min-height:80px;
    margin:auto;
    background:black;
    margin:1em;
    align-self:flex-start;
    flex:1;
}

check it in different browser to find out if it suits your needs.

bootstrap can be used as a fallback for browser wich doesn't apply the flex rules.

Upvotes: 0

markb
markb

Reputation: 1295

Here is an update to my JSFiddle: http://jsfiddle.net/7N2Jr/6/

After some tinkering, it got there.

Then when the images drop to the right side, under the main text I'll use the media-query to remove the margins

Upvotes: 0

Krsto Jevtic
Krsto Jevtic

Reputation: 1218

Like people above said , try instead using bootstrap framework.

However if you don't want that then just read about media queries. You can start here: http://css-tricks.com/css-media-queries/

Upvotes: 0

patrick
patrick

Reputation: 11721

Check Bootstrap 3.0, it provides everything you're looking for!

as an example: in this case your HTML would look like this:

<div id='text' class='col-lg-6 col-sm-8 col-xs-12'>
   put your text here
</div>
<div id='images' class='col-lg-6 col-sm-4 col-xs-12'>
   <div id='img1' class='col-lg-6 col-sm-12 col-xs-6'> ... </div>
   <div id='img1' class='col-lg-6 col-sm-12 col-xs-6'> ... </div>
</div>

Bootstrap uses a 12 column grid. For different screen sized (LG, SM, XS for instance) you can define how many of these columns a DIV takes up in that grid.

Upvotes: 1

Related Questions