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;
Related
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.
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 have a webpage containing a centered container with content and I want to display a logo next to it.
The layout is as following: div - container. Where the container is centered and the div lef of the container needs to fill out the width left on the screen.
html, body {
height: 100%;
width: 100%;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
<div id="container">
</div>
<div id="lef">
</div>
A jsfiddle with this code is available on http://jsfiddle.net/7QJQn/
This is the option that comes closed
http://jsfiddle.net/7QJQn/4/
I think that the best solution for doing something like this is just using javascript / jQuery.
Depending on which browsers you wish to support, you could use calc().
Basically, you want 50% of the viewport width (50vw) minus half of width of #container (so you're measuring from the center of your #container and you use half of all the values) - I'm assuming that you're OK with absolute positioning #lef to the viewport to keep it to the right?
CSS (fiddle here):
#lef {
background-color:yellow;
width:calc(50vw - 100px);
height:20px;
position:absolute;
right:0;
top:0;
}
Add this to your css:
#lef{
float:left
}
And change the order of the divs in the html, like this:
<div id="lef"></div>
<div id="container"></div>
First of all, you should wrap your markup in a wrapper div so elements stay tight.
I made some changes, take a look:
<div id="wrapper">
<div id="lef">
</div>
<div id="container">
</div>
</div>
And the css:
html, body {
height: 100%;
width: 100%;
}
#wrapper{
width: 360px;
}
#container {
width: 200px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-color:red;
}
#lef {
background-color:yellow;
width: 160px;;
height:100px;
float: left;
}
Example
If using flexbox is an option, you can do this with the flex-grow property:
With the following markup
<div class="main-row">
<div class="filler"></div>
<div class="row-content">Fixed width centered div</div>
<div class="filler"></div>
</div>
you need to set flex-grow: 1 on the filler divs. See this fiddle.
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.
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.