Let's say I want to have two columns. The right one is 200px wide, and the left one just takes up the remaining width. Is this possible? What do I set the width of the left column to be?
Update: Solved Using Flexbox
Now that we have Flexbox (with over 95% support globally) this layout (and others) can be easily achieved without styles being dependent on source order.
Flexbox Example:
HTML
<div class="flex-container">
<div class="flex-column"> Big </div>
<div class="fixed-column"> Small </div>
</div>
CSS
.flex-container {
display: flex;
}
.flex-column {
flex: 1;
}
.fixed-column {
width: 200px;
}
Live Demo using Flexbox
Solved Using Floats
The trick is matching the remainder column’s margin to the floated sidebar’s width. Remember, source order matters when using floats, so we make sure the floated element comes first.
Example right-aligned small column:
HTML
<div id="Container">
<div id="RightColumn">Right column</div>
<div id="LeftColumn">Left column</div>
</div>
CSS
#RightColumn {
float : right;
width : 200px;
}
#LeftColumn {
margin-right : 200px;
}
Live Demo
Right-aligned small column
Left-aligned small column
You float the left column and set margin to minimum of the width of the left column.
<div id="Container">
<div id="LeftColumn" style="float: left; margin-right: 200px;"></div>
<div id="RightColumn" style="float: right; width: 200px;"></div>
</div>
OR
<div id="Container">
<div id="RightColumn" style="float: right; width: 200px;"></div>
<div id="LeftColumn" style="margin-right: 200px;"></div>
</div>
If you don't want to float divs, you can do the following:
.rightDiv {
position: absolute;
right: 0;
width: 200px;
}
.mainDiv {
position: absolute;
left: 0;
right: 200px;
}
Yes, it is possible. Set the right column's style to float: right and width: 200px, and the left column will be the content and take up the rest of the width.
Related
How i can center div elements horizontally, so when i change the width of the browser, the last div go down with css?
So:
---||||-||||-||||---
--------||||--------
When i write:
<div style="float: left; position: relative; left: 50%;">
<div style="float: left; position: relative; left: -50%;">
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
...
</div>
</div>
Then after a element go down, all div elements go to the left side.
I would recommend using display: inline-block on the elements and then using text-align: center on the container to handle the centering you want:
I cleaned up your HTML but here is the basic HTML formatting with a container class and multiple (as many as you want) block class DIVs:
<div class="container">
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
</div>
The CSS modifies the display settings of the blocks and the text-alignment of the container:
div.block {
display: inline-block; /* this changes the elements to behave more like inline elements (think <span>s) */
width: 315px;
margin: 10px 0;
height: 340px;
}
div.container {
width: 100%;
text-align: center; /* this is the magic that centers the elements */
}
I put together a small demo that should help demonstrate this method: JSFIDDLE
Be Aware: a small 'quirk' exists with the display: inline-block CSS. it causes a small amount of space to occur between the elements. This can be removed multiple ways, my preferred methods being either using comments or wrapping the closing tags of the DIVs. (the issue is caused by the return/spaces between the elements in the HTML):
<div class="container">
<div class="block">Text</div><!--
--><div class="block">Text</div><!--
--><div class="block">Text</div>
</div>
<div class="container">
<div class="block">Text</div
><div class="block">Text</div
><div class="block">Text</div>
</div>
reference for the quirk behavior
Create a container <div> that is 100% of a given area. Then set each <div>'s width inside the container to be a % and float: left;. They'll stack next to each other until they do not fit and will break to the next line.
.container {
width: 100%;
}
.three {
width: 33%;
min-width: 225px;
float: left;
border: 1px solid black;
}
<div class="container">
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
</div>
Run the snippet.
You could use media queries to write different css code for different sizes:
Media Queries
I have a design that should be:
Left container 200px
middle container dynamic
right container 200px
That means the midde container should be as much width as possible, specialy when the user resizes the browser.
I know what I describe is a perfect thing for a table, left and right td to width=200 and middle-td without width and the middle resizes perfectly to the scretch of the screen.
But to given reasons I have to use Div container here not a table.
So how to do this?
You can use the calc() method to the middle container like :
width: calc(100% - 400px);
Example here.
You can use display: table to replicate table behaviour with divs like so:
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
.wrapper {
display: table;
width: 100%;
}
.wrapper div {
display: table-cell;
}
.left {
width: 200px;
}
.right {
width: 200px;
}
Demo # CodePen
Give the middle one margin: 0 200px;
The left one: margin-right: -200px;
The right one: margin-left: -200px;
And let them float. Make sure to set the width of the outer ones to 200px aswell.
First you define all the divs as display: inline-block and then you style the left and right divs with a width of 200px and let them float. Then set the container width to the desired width.
<div class='container'>
<div class='right'>
col3
</div>
<div class='left'>
col1
</div>
<div class='middle'>
col2
</div>
</div>
Then give the middle one margin: 0 200px;
The left one: margin-right: -200px;
The right one: margin-left: -200px;
Sorry, I'm sure this question has been asked before, but if there anyway to do the following:
I have three divs in-line like the diagram shown below, when the browser window is shrunk it automatically drops each div to the next line. I know that I could use the #media command and assign a different css stylesheet if the browser is a certain size, but it would be great if I could make it fluid.
Before:
After:
Thank you!
Wrap the divs in a container element, like....
<div class="wrapper">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
</div>
Then make sure .wrapper has a set width, most likely a percentage. If it has a set width and the inline elements are all floated left, once there is no longer room within the .wrapper div, they'll shift to the next line.
Try:
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
and:
.box {
background: #000;
width: 300px;
height: 300px;
float: left;
}
They should automatically drop when below 900px, see: http://jsfiddle.net/JQFH7/
Elements into it
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div>
CSS
.inner
{
width: 100px;
height: 100px;
display: inline-block;
background: black;
}
div#wrapper
{
width: 100%;
text-align: center;
}
JSFiddle
I want to create two divs beside each other, however I want the one on the left side to be 300px, and the right one to take up the remaining amount on the screen. How would that be possible? Thanks!
The most straight-forward (and I would say correct) way is to use display: table:
#wrapper {
display: table;
width: 100%;
}
#left, #right {
display: table-cell;
color: white;
}
#left {
background: blue;
width: 300px;
}
#right {
background: red;
}
<section id="wrapper">
<aside id="left">Left 300px</aside>
<div id="right">Right the rest</div>
</section>
http://jsfiddle.net/YbLZE/1/
Try resizing the bottom right frame.
Updated with HTML5 elements section and aside, which you should use if you have an HTML5 doctype. I have to remember to use those...
This is the working example:
http://jsfiddle.net/tnm62/
Explenation:
1. Place both elements in one container.
2. Position your left element absolute, set its width to 300px.
3. Set left margin to your right element to 300px.
One solution is to float: left; the left div that's 300px wide, and then apply overflow: hidden; to your right div. Here's the basic outline:
HTML:
<div class = "left">
Glee is awesome!
</div>
<div class = "right">
Glee is awesome!
</div>
CSS:
.left {
width: 300px;
float: left;
}
.right {
overflow: hidden;
}
And a little demo: little link.
Here's something for newer browsers (not IE):
CSS:
#container {
display: box;
}
#left {
width: 400px;
}
#right {
box-flex: 1;
}
HTML:
<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
Demo: http://jsfiddle.net/N5zhH/1/
This should be sufficient:
<div style="overflow: hidden;">
<div style="width: 300px; float: left;"></div>
<div style="margin-left: 300px;"></div>
</div>
overflow: hidden will stretch the container div to accommodate the tallest child element
float: left floats the element left (doh!)
width: 300px and margin-left: 300px together assures that if the right column is taller than left it will not flow below the left floated div; it will maintain a 300x gap from the left edge of container div
Tip: change to margin-left: 320px to add a 20px gutter
Here is a nice little DEMO
I'm reworking a layout currently using tables for a two-column design, and ran into some problems.
<div id="frame">
<div id="leftcol">
<div id="1">blah</div>
</div>
<div id="leftcol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
#leftCol
{
margin-right: 10px;
width: 49%;
float: left;
}
#rightCol
{
width: 49%;
float: left;
}
Originally I had a two-columned table with width=100% - this worked perfectly in Firefox, but in IE the table overflowed the #frame div container. I removed this table and added two floated divs, but I still have issues getting the columns to be equal.
All of my content resides inside the div #frame, which has height constraints as well as padding and a margin (I use this to leave a "gutter" around the edge of the page).
I need the two floated DIV columns to be the same width, and sit next to each other with a 10px (ish) gutter in between. I tried making both width: 50%, but this fails because the container they are in (#frame) is smaller width-wise then the whole body of the page. (If I get rid of the gutter padding, it works in FF but still not in IE.
Making each column width: 49% works, but looks ugly as the size changes between browsers and the right column does not line up with the edge of the #frame container.
I tried doing this before but ultimately went back to tables 9since it seemed to be working), but now that I see it's incompatible with IE I've been working for hours to find a cross-browser css solution. Any ideas?
Setting each column to 50% should work, if you make sure they don't have any margins or paddings.
If they need padding, put in an extra wrapper div, that can have as much padding/margins as neccesary.
For the gutter in between, you could give these wrapper divs a border on left/right side to make it look like a space in between the columns.
Posting a full code example (on jsbin.com for example) would also help us understand your problem more easily. :)
I think you might benefit from a css framework like 960gs or blueprint css it allows absolute grid placement and is cross browser compatible out of the box.
http://www.blueprintcss.org/
http://960.gs/
If you know the width of the frame, you can do this
#frame {
background-color: green;
width: 500px;
overflow: auto;
}
#leftCol
{
width: 245px;
float: left;
background-color: red;
}
#rightCol
{
width: 245px;
float: right;
background-color: blue;
}
<div id="frame">
<div id="leftCol">
<div id="1">blah</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
Otherwise, an add an extra div, and do this
<div id="frame">
<div id="leftCol">
<div id="hack">
<div id="1">blah</div>
</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
#frame {
background-color: green;
width: 500px;
overflow: auto;
}
#leftCol
{
width: 50%;
float: left;
}
#hack {
margin-right: 10px;
background-color: red;
}
#rightCol
{
width: 50%;
float: right;
background-color: blue;
}
Ok here you go. This is how it can be achieved.
CSS
#leftCol, #rightCol{
width: 48%;
float: left;
background: red;
box-sizing: border-box;
}
#leftCol{
margin-right: 1%;
}
#rightCol{
margin-left: 1%;
}
HTML
<div id="frame">
<div id="leftcol">
<div id="1">blah</div>
</div>
<div id="rightCol">
<div id="2">blah</div>
<div id="3">blah</div>
</div>
</div>
If you need here is the vendor prefix for box-sizing.
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Note that you have typo in your HTML wher both div are called #leftCol. There is no#rightCol.