Two columns layout with aligned div

Question

2 column div layout: right column with fixed width, left fluid

I have the same problem, only in the code box on the right goes first, second left

#container {
  width: 100%;
  max-width: 1400px;
  min-width: 1024px; 
  margin: 0 auto;
  text-align: left;
}

/*left block */
    .block_side {
        width: 236px;
        height: 400px;
        float: left;
        margin: 19px 0 0 30px;
    }


/* Right block */    
.content_side {
        float: none;
        overflow: hidden;
        width: auto;
        margin: 0 30px 0 0;
    }

content_side be right and left block_side, but they must have the document in that order

<div id="container">
   <div class="content_side">
     {CONTENT}
   </div>
   <div class="block_side">
     {BLOCK}
   </div>
 </div>

"content_side" replaces a unit that should be left, occupies the entire available width

Demo in Jsfiddle

"content_side" replaces a unit that should be left, occupies the entire available width — user3388999, Mar 06 '14 at 16:12

score 1 · Answer 1 · answered Mar 06 '14 at 16:18

1

change #containet to #container and text-align: left; to text-align: center;

#container {
  width: 100%;
  max-width: 1400px;
  min-width: 1024px; 
  margin: 0 auto;
  text-align: center;
}

Demo in jsfiddle

answered Mar 06 '14 at 16:18

Gildas.Tambo

22,173
7
50
78

score 0 · Answer 2 · answered Mar 06 '14 at 16:09

0

Change css rule float:none to float:right would do the trick if I understand your question correctly.

.content_side {
    float: right;
}

answered Mar 06 '14 at 16:09

Johan Sundén

447
4
9

Could you try to be more specific what the problem is? It's not easier to help you just because you write "!!!!!". – Johan Sundén Mar 06 '14 at 16:14
sorry.. "content_side" replaces a unit that should be left, occupies the entire available width – user3388999 Mar 06 '14 at 16:16

Ernest Sawyer · Answer 3 · 2014-03-06T16:44:50.250

0

CSS

#container {
  width: 100%;
  max-width: 1400px;
  min-width: 1024px; 
  margin: 0 auto;
  text-align: left;
    position:relative;
    height:auto;
}

/*left block */
    .block_side {
        width: 256px;
        height: 400px;
        float: left;
        margin: 0px 0 0 30px;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    background-color:green;
    }


/* Right block */    
.content_side {
        float: right;
        width: 738px;
        margin: 0;
    height:400px;
    overflow:auto;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    background-color:red;
    }

HTML

<div id="container">
   <div class="block_side">
     {BLOCK}
   </div>
   <div class="content_side">
     {CONTENT}
   </div>
 </div>

You need to float:left or float:right your blocks (side and content).

DEMO HERE

More about box-sizing trick here: http://css-tricks.com/box-sizing/

edited Mar 06 '14 at 16:44

answered Mar 06 '14 at 16:18

Ernest Sawyer

360
2
13

block_side must be a fixed-width 256px – user3388999 Mar 06 '14 at 16:23
Does not work, the block_side should be left with a width of 256px and the content_side stretch and should be on the right.. – user3388999 Mar 06 '14 at 16:31
ANd block_side tinue to be after content_side from html – user3388999 Mar 06 '14 at 16:32
http://stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left-fluid I have the same problem, only in the code box on the right goes first, second left – user3388999 Mar 06 '14 at 16:42

Two columns layout with aligned div

3 Answers3