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.
Related
My setup is this:
.cprp_data {
width: 100%;
overflow: hidden;
}
.cprp_title {
width: 80%;
float: left;
}
.gelijkeniscore {
float: right;
}
.cprp_percentage {
float: right;
}
.cprp_excerpt {
width: 80%;
float: left;
}
.cprp-custom-container {
float: right;
}
<div class="cprp_data">
<div class="cprp_title">TITLE</div>
<div class="gelijkeniscore">SOME CONTENT</div>
<div class="cprp_percentage">SOME CONTENT</div>
<div class="cprp_excerpt">SOME CONTENT</div>
<div class="cprp-custom-container">SOME CONTENT IN SEVERAL DIVS
</div>
</div>
cprp_data should function as the wrapper, and this is how i want the other divs inside it to to align:
<cprp_title> <gelijkeniscore>
<cprp_excerpt> <cprp_percentage>
<cprp-custom-container>
To be clear, divs cprp_excerpt and cprp_title should align left on top of each other using a width of 80%, and the other 3 divs are supposed to align right also on top of each other using the remaining 20%, looking kinda like a sidebar.
I can't get it to work. Been trying for hours using several CSS setups. The above CSS is as close as i have gotten so far. But somehow the cprp_excerpt div keeps taking up 100% of the width pushing the cprp-custom-container way down. Any help would be much appreciated!
shift the cprp_percentage div after the cprp_excerpt div
As inferred from the problem statement:
all the internal divs are now stacked upon each other in the desired hierarchy
left container occupies 80% screen width
right container occupies 20% screen width
The container wrapper remains intact, i have just introduced two sub-wrappers to distinguish contents of left and right side of screen
Hope this code helps!
.cprp_data {
width: 100%;
overflow: hidden;
/* display flex to control the scenario */
display: flex;
}
/*.cprp_title {
width: 80%;
float: left;
}
.gelijkeniscore {
float: right;
}
.cprp_percentage {
float: right;
}
.cprp_excerpt {
width: 80%;
float: left;
}
.cprp-custom-container {
float: right;
}
*/
/* as the left section should be 80% in width */
.left{
width: 80%;
border: 1px solid #000000;
}
/* as the right section should be 20% */
.right{
width: 20%;
border: 1px solid #000000;
}
<div class="cprp_data">
<div class="left">
<div class="cprp_title">TITLE</div>
<div class="cprp_excerpt">SOME CONTENT</div>
</div>
<div class="right">
<div class="gelijkeniscore">SOME CONTENT</div>
<div class="cprp_percentage">SOME CONTENT</div>
<div class="cprp-custom-container">SOME CONTENT IN SEVERAL DIVS
</div>
</div>
</div>
First of all, please look at this code.
I learned that this was a common way to realize liquid layout.
But I can not understand some of this code.
.container {
overflow: hidden;
}
main {
float: left;
width: 100%;
margin-right: -340px;
background: red;
}
.main-inner {
margin-right: 340px;
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
Question 1
I understand that the negative margin has the effect of moving an element in the specified direction. However, when you run this code, the main element does not seem to be moving at all. Why is this?
Question 2
Since we set the width of the main element to 100%, I understand that the aside element hits the main element and that the main element and aside element can not be side by side.
So, I think that we prepare a horizontal width that can apply the aside element by applying negative margin, but the background color of the main element is applied in the same way as when the horizontal width is 100%. Why is the background color of the main element not (100% - aside width)? How is this series of rendering done?
Question 3
Which document on W3.org describes these actions? I tried looking, but I could not find any detailed information on them.
thank you.
Let's start by adding the properties one by one and see what is happening.
Intially we have this code with no margin applied and only float elements:
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
}
.main-inner {
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
It's clear that you made the red element to be width:100% floating on the left and the green one to float on the right with a fixed width. You may also notice that p element is having a default margin that's why the blue is not totally covering the red.
Now if you add negative margin-right you will not move the element or decrease the width but you will pull the content from the right in order to overlap the element. Here is a basic illustration:
.box {
width: 200px;
height: 200px;
background: red;
float: left;
}
<div class="box" style="margin-right:-100px;height:220px">
</div>
<div class="box" style="background:blue;">
</div>
As you can see the blue box is overlapping the red one by exactly 100px because we applied -100px to the margin-right of the red box. Same logic will happen in your case, you applied a negative margin equal to the size of the sidebar so you created the need space to move the sidebar at the same level of the main element.
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
margin-right:-340px;
}
.main-inner {
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
So the main element is still 100% width BUT the sidebar is overlapping it due to negative margin.
Now the last step is to add the margin inside the main and in this case it will reduce the width of the inner element to make the total (width + margin) always equal to the width of parent element (containing block)
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
margin-right:-340px;
}
.main-inner {
background: blue;
margin-right:340px;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
Here is another illustration of margin with block element non floated:
.container {
border: 2px solid;
max-width: 50vw;
margin: auto;
}
.first {
height: 100px;
background: red;
margin: 0 -50px;
}
.second {
height: 100px;
background: blue;
margin: 0 50px;
}
<div class="container">
<div class="first">
</div>
<div class="second">
</div>
</div>
In this case the width is increasing/decrasing due to margin because the logic is always: width + margin = width of containing block.
With elements like float and inline block the logic is the same but we won't have width changes because the width is defined either by the content or explicitly.
.container {
border: 2px solid;
display:inline-block;
}
.first {
float:left;
height: 100px;
background: red;
margin-right:-50px;
}
.second {
display:inline-block;
width:200px;
height: 120px;
background: blue;
margin-top:20px;
margin-right:-100px;
}
<div class="container">
<div class="first">
some text here
</div>
<div class="second">
</div>
</div>
Here the float element has a width defined by the content, the inline-block has a width equal to 200px. The negative margin is creating the overlap and the size of the parent element (the containing block) is equal to width + margins.
For the references:
8 Box model
9 Visual formatting model
10 Visual formatting model details
The above explanation is very simplifed. Refer to the specification links for a full and details explanation.
The odd placement from <main> comes from a browser css-rule
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
You can reset it using a css reset like normalize.css.
However, I recommend using display: flex. Some wonderful resources.
.container {
display: flex;
}
main {
width: 75%;
}
aside {
width: 25%;
}
This is sort of hard to explain so I made a fiddle:
https://jsfiddle.net/8wujkpqb/
I have a right floating div with a max-width set. I need the div inside of that to take up 100% of the max-width so the content can be left-aligned to the content in the div below.
<div class="container">
<div class="mainleft">
<div class="outer-red">
<div class="first">
I need this<br/> pushed to the left<br/> to align with the<br/> lower text but still<br/> be in a "max-width"<br/> container floating right.
</div>
<div class="clear"></div>
</div>
<div class="outer-gray">
<div class="second">
this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width
</div>
<div class="clear"></div>
</div>
</div>
<div class="mainright">
<div class="right-content">
content
</div>
</div>
<div class="clear"></div>
CSS
.container {
width: 100%;
}
.mainleft {
width: 50%;
float: left;
}
.mainright {
width: 50%;
float: left;
}
.outer-red {
width:100%;
background: red;
padding: 40px;
box-sizing:border-box;
}
.outer-gray {
width:100%;
background: gray;
padding: 40px;
box-sizing:border-box;
}
.first {
float: right;
max-width:250px;
clear:both;
}
.second {
float: right;
max-width:250px;
}
.right-content {
width:100%;
background: blue;
padding: 40px;
box-sizing:border-box;
}
.clear {
clear: both;
}
https://jsfiddle.net/8wujkpqb/
Any help is greatly appreciated!
Just add another div into your "first" container that possesses the max-width and let the parent be the size that is necessary to align the inner container left. Like so
.first {
float: right;
max-width: 100%;
clear:both;
width: 200px
}
.inner {
max-width: 200px
}
https://jsfiddle.net/8wujkpqb/1/
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
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.