CODEWITHSUNDEEP
htmlcss
Marco
Marco

Reputation: 2737

2 columns, one side fluid , one side fixed

Ok, so i thought this was easy as 123. I've research here and tried a couple of solutions. For some reason, i can't get it right.

Basically, i'm trying to do a layout where the left column is fluid and the right column is fixed.

HTML:

<div class="column-ab">
    <div class="col-content">content section</div>
    <div class="col-aside">side section</div>
</div>

CSS:

.column-ab {background-color: black; width: 100%;}
.column-ab .col-aside, .column-ab .col-content {float: left;}
.column-ab .col-content {background-color: cyan; margin-right: 300px;}
.column-ab .col-aside {background-color: yellow; width: 300px;}
.column-ab:after {display: table; content: ""; clear: both;} /* clear */

jsfiddle: https://jsfiddle.net/ud1frxdp/

Why something so easy doesn't work?

Upvotes: 1

Views: 162

Answers (3)

romuleald
romuleald

Reputation: 1444

Using display: table; and display: table-cell; is a common use and also a wide cross-browser code, compatibility from IE8 http://caniuse.com/#search=table

https://jsfiddle.net/ud1frxdp/3/

.column-ab {
    background-color: black;
    width: 100%;
    display: table;
}
.column-ab .col-aside, .column-ab .col-content {
    display: table-cell;
}
.column-ab .col-content {
    background-color: cyan;
}
.column-ab .col-aside {
    background-color: yellow;
    width: 300px;
}

I also exploded your CSS because of readability, you should avoid coding like this and use a post-processor to minify it, being able to read the code is very important.

Upvotes: 1

m4n0
m4n0

Reputation: 32355

As an alternative solution your problem can also be solved using few lines of flexbox layout. Code explanation in comments.

.column-ab {
  display: flex;
  flex-wrap: wrap; /* Wrap the divs when width is too small i.e. <300px of viewport */
}
.col-content {
  flex: 1; /* Expands and shrinks according to width, fluid content */
  background: tomato;
}
.col-aside {
  flex: 0 0 300px; /* flex-basis: 300px for fixed width */
  background: lightblue;
}
<div class="column-ab">
  <div class="col-content">content section</div>
  <div class="col-aside">side section</div>
</div>

Updated JSfiddle

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28593

Turn your classes into ids or they will both inherit a width of 100%; then set the width.

.column-ab {background-color: black; width: 100%;}
#col-aside,  #col-content {float: left;}
#col-content {background-color: cyan; width: calc(100% - 300px);}
#col-aside {background-color: yellow; width: 300px;}
.column-ab:after {display: table; content: ""; clear: both;} /* clear */
<div class="column-ab">
	<div id="col-content">content section</div>
	<div id="col-aside">side section</div>
</div>

Upvotes: 3

Related Questions