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
Related
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;
Got a fixed div of 40px that i need to put on the middle of two auto width div
<div class="container">
<div class="row">
<div style="min-height:60px; width:auto fill left"></div>
<div style="width:40px; min-height:60px;"></div>
<div style="min-height:60px; width:auto fill right"></div>
</div>
</div>
This is an extremely common question, any ways try this out!
CSS:
html, body {
height: 100%;
}
.wrapper {
width: 100%;
min-width: 700px; /* .center and combined min-width we want for .left and .right */
position: relative;
overflow: hidden;
}
.wrapper > div {
min-height: 100%; /* set to whatever height you want */
}
.left {
width: 50%;
float: left;
margin-right: -250px; /* half of .center */
}
.left > div {
margin-right: 255px; /* half of .center with 5px extra padding */
}
.center {
width: 500px;
float: left;
background: #e0e0e0;
position: relative;
z-index: 3;
}
.right {
width: 50%;
float: right;
margin-left: -250px; /* half of .center */
}
.right > div {
margin-left: 255px; /* half of .center with 5px extra padding */
}
HTML:
<div class="wrapper">
<div class="left">
<div>
<p>Left column content.</p>
</div>
</div>
<div class="center">
<p>Center column content.</p>
</div>
<div class="right">
<div>
<p>Right column content.</p>
</div>
</div>
</div>
CodePen: http://codepen.io/anon/pen/akjpL
I didn't have time to explain what the above code does at the time I wrote it, so I'll give a brief explanation now.
.left and .right are both floated to their respective sides and set to equal a width of 50% of the page to sit exactly side by side, their margins are set to be the negative value of half of whatever we make .center. We then need to create child div's for each .left and .right and set their margins to positive of the same amount we set as the negative value for their parent div's plus some padding which you can play around with - as in the padding is added onto the margin. Now we have made room for .center to be in the middle, it's width will again be the positive total of the negative margins of .left and .right, we'll float it left and it will fit right in the middle! Any questions feel free to ask away!
Try setting display: table; on .container, display: table-row; on .row and display: table-cell; on the inner DIVs.
I have 3 floated divs on the first "row", the two first divs have a height of 100px, and the third div has a height of 200px. Anything I add after the first row won't fill the whitespace created from the third div.
CSS:
#container {
overflow: hidden;
width: 440px;
margin: -5px;
}
#container div {
background-color: gray;
height: 100px;
width: 100px;
margin: 5px;
float: left;
}
#container #widget2 {
width: 210px;
}
#container #widget3 {
height: 200px;
}
HTML:
<div id="container">
<div id="widget1">1</div>
<div id="widget2">2</div>
<div id="widget3">3</div>
<div id="widget4">4</div>
<div id="widget5">5</div>
<div id="widget6">6</div>
<div id="widget7">7</div>
</div>
widget3 somehow creates unusable space, so that widget4 to 6 are far away and it generally looks weird.
You can see what I mean here: http://jsfiddle.net/SGdG3/80/
I want the red boxes to be "pushed" up to use the white space.
Basically this is how Floated elements behaves. if you want to fill the space, then you have go for absolute positioning with Javascript. Here is a Beautiful JQuery plugin for your solution.
This question already has answers here:
2 column div layout: right column with fixed width, left fluid
(8 answers)
Closed 8 years ago.
Im searching for a way to have 2 divs as columns where div on right has a fixed width and div on left fill remaining space.
Does anyone happen to know if this can be done?
My attempt (renders block2 underneath block1):
<style>
.block1 {
width: auto;
height: 200px;
background-color: green;
}
.block2 {
float: right;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
You can do it like this:
HTML:
<div class="right">right</div>
<div class="left">left</div>
CSS:
.left{
background:red;
}
.right{
float:right;
width:200px;
background:green
}
Check this live example http://jsfiddle.net/QHTeS/2/
Float Both of the elements left:
<style>
.block1 {
width: auto;
height: 200px;
float: left;
background-color: green;
}
.block2 {
float: left;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
You should wrap them in a container as well to prevent messing up the rest of your layout. :)
http://jsfiddle.net/tcFjN/
That was wrong!
Use display: table; on parent and display: table-cell; on children:
<div id="wrapper">
<div class="block1">test1</div>
<div class="block2">test2</div>
</div>
#wrapper
{
display: table;
width: 100%;
}
.block1 {
width: auto;
height: 200px;
display: table-cell;
background-color: green;
}
.block2 {
display: table-cell;
height: 200px;
width: 200px;
background-color: red;
}
http://jsfiddle.net/tcFjN/1/
This is my solution without floats. The only caveat is that I need to use a wrapper. So, if the desired HTML is
parent (has a border, margin, padding,...)
left (fixed width)
right (variable width, fill the entire space)
I must rewrite it as
parent (has a border, margin, padding,...)
wrapper (has no styling)
left (fixed width)
right (variable eidthm, fill the entire space)
My HTML is
<div style="border:1px solid black; background:red; margin:10px; padding:10px;" >
<div style="">
<div style="display:table-cell; padding:10px; min-width:100px; max-width:100px;background:green;">Left</div>
<div style="display:table-cell; padding:10px; width:100%; background:yellow;">Main content</div>
</div>
</div>
The main points here are:
No use display:table because then we can not set the border
The use of min-width, max-width
The use of width:100%
Check this jsfiddle
Start out with a container <div> (#container) that holds both the left and right <div>s. Float one <div> to the right and give it a specific width (320px in my example). Then give the other <div> an absolute position starting at the absolute left (0px) and ending at the left edge of the <div> on the right (320px).
If you adjust the width of #container, the right <div> will remain fixed at 320px while the left <div> will expand to fill whatever the remaining area is.
I want the right div to have a fixed width and the left div to take up everything else inside the box.
<div id='outer' style='width:100%'>
<div id='inner1'></div>
<div id='inner2'></div>
</div>
There may be a better way of doing this, but this may achieve what you're trying to accomplish:
#outer {
background-color: red;
}
.clear {
clear:both;
}
#inner1 {
background-color: red;
margin-right:200px;
float:left;
}
#inner2 {
float: right;
width: 200px;
margin-left: -200px;
background-color: blue;
}
Combined with
<div id='outer' style='width:100%'>
<div id='inner1'>Foo</div>
<div id='inner2'>Bar</div>
<div class='clear'></div>
</div>
So, while this doesn't actually make the one on the left take up the rest of the space, it won't encroach upon the right column.
Associated jsFiddle:
http://www.jsfiddle.net/r7MgY/1105/