I am trying to place two divs next to each-other on the same line, have a break and then have another full block div.
Here is what I have so far
body code
<body>
<div class="noFloat">
<div class="square bgBlue ltFloat">I'm Blue</div>
<div class="square bgGreen ltFloat">I'm Green</div>
</div>
<div class="dvCenter">I'm in the middle</div>
<div class="dvCenter">I'm in the middle</div>
</body>
css
body {
background-color: red;
}
.square {
width: 100px;
height: 100px;
}
.bgBlue {
background-color: blue;
}
.bgGreen {
background-color: green;
}
.dvCenter {
float: none;
margin: auto;
width: 300px;
background-color: purple;
}
.ltFloat
{
float: left;
}
.noFloat
{
display: block;
float: none;
}
I am very stuck as to why this won't work correctly. Any help is greatly appreciated :-)
By break I intended to have the two left floated divs sharing no horizontal space with the centered divs.
Change the .noFloat rule to
.noFloat
{
display: block;
float: none;
overflow:auto;
clear:both;
}
demo at http://jsfiddle.net/gaby/53vVP/1
Alternatively you can set clear:left; on the .dvCenter rule.
demo at http://jsfiddle.net/gaby/53vVP/
Related
Is there any way to make the content to flow to left/right instead of down while the container doesn't have enough space for it in CSS?
.container1 {
width: 70%;
float: left;
}
.container2 {
width: 30%;
float: left;
}
.content {
width: 50%;
float: left;
}
.overflowContent {
width: 20%;
float: left;
}
/* You can add background colors to see where every part is */
<div class="container1">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
<div class="container2"></div>
I want a way that makes the overflow part go on the right side of the container instead of below it.(i want the third part to be displayed on/over the container 2)
My idea was to add something to a link with [ display : hidden ] that only shows up [ display : block ] on the right side of the link on the other parts of the website while we hover on the link.
Add a div inside the container that will hold the overflowing content, and apply overflow-x: auto to the container.
The flexbox code is just a friendly suggestion, much easier to work with than floats for layout.
* { box-sizing: border-box; }
.container {
width: 70%;
border: 5px solid red;
overflow-x: auto; /* this causes anything inside that is wider to overflow horizontally */
}
.inner {
display: flex;
}
.content {
flex: 0 0 50%;
padding: 20px;
background: papayawhip;
}
.overflowContent {
flex: 0 0 20%;
padding: 20px;
background: dodgerblue;
}
<div class="container">
<div class="inner">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
</div>
You can do this considering inline-block and white-space:nowrap. Don't forget to reset the whitespace between inline element (I used the font-size trick here)
.container1 {
width: 70%;
display:inline-block;
outline:1px solid red;
}
.container2 {
width: 30%;
display:inline-block;
outline:1px solid green;
}
.content {
width: 50%;
display:inline-block;
font-size:initial;
}
.overflowContent {
display:inline-block;
font-size:initial;
}
body {
font-size:0;
white-space:nowrap;
}
<div class="container1">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
<div class="container2"></div>
I need to put a sidebar on the left of the content.
I had this html:
<div class="sidebar"></div>
<div class="content"></div>
and I solved using:
.sidebar{
width: 280px;
float: left
}
.sidebar + .content{
margin-left: 300px
}
For this example: https://jsfiddle.net/VixedS/fcx2aLLa/
But now my that .content comes before the .sidebar,
<div class="content"></div>
<div class="sidebar"></div>
how can I obtain the same result just using css?
I don't want to loose the remaining space of the body for the width of .content with or without .sidebar.
So please remember that before saying to float the .content to right. Also, I don't know which page has a .sidebar.
This solution is very powerfull. Works for every browser, any device. Also a great way for responsive design and for a third column.
Update:
.container {
overflow:auto;
}
.sidebar {
width: 280px;
float: left;
background: #EEE;
margin-left: -100%;
}
.content {
float: left;
width: 100%;
}
.center {
margin-left: 280px;
}
.container > div:only-child > div.center {
margin-left: 0;
}
<div class="container">
<div class="content">
<div class="center">
Spaghetti
</div>
</div>
<div class="sidebar">
Pizza
<br /> Hobby
</div>
</div>
Do following way. Use float:right to sidebar and display:table to it's parent.
body {
display: table;
}
.content {
float: right;
}
.sidebar{
width: 280px;
float: left;
background:#EEE; // just for this example
}
.sidebar + .content{
margin-left: 300px
}
<div class="content">Spaghetti</div>
<div class="sidebar">Pizza <br /> Hobby</div>
Flexbox...means you don't have to use floats...and you can re-order the elements as you require.
Support is IE10 and up.
body {
display: flex;
}
.sidebar {
width: 280px;
background: #aaa; // just for this example
order: 0;
}
.content {
flex: 1;
order: 1;
background: plum;
}
<div class="content">
Spaghetti</div>
<div class="sidebar">Pizza
<br />Hobby</div>
I have a 'frame' containing two divs which are respectively aligned on the left and on the right. Unfortunately, the main div does not have the proper height to englobe the inner divs.
Here is the HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
</div>
and the CSS:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
float: left;
}
#b {
background: green;
float: right;
}
Here is the JsFiddle: http://jsfiddle.net/mPH4H/
I should see a red frame, but there is none.
The floated elements are removed from the flow of the document, so the parent container thinks that it has nothing inside of it. You can add overflow:auto to your CSS rules for #frm to bring the background back and "contain" the floated children:
#frm {
background: red;
width: 100%;
height: auto;
overflow:auto;
}
jsFiddle example
overflow:hidden; will give height to #frm
Try:
#frm {
background: red;
width: 100%;
height: auto;
overflow:hidden;
}
DEMO here.
OR
Clear floats:
HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
<div class="clr"></div>
</div>
CSS:
.clr{clear:both;}
DEMO here.
i think this is worked as fine:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
width: 50%;
float: left;
}
#b {
background: green;
width: 50%;
float: right;
}
Given the following
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
(See: http://jsfiddle.net/ericjohannsen/JCPEH/1/)
Why does container apparently not have any area (that is, it has a zero height, plus the border)? I naively expected it to be as tall as the child divs that it contains.
What is the proper way to set this up so that the div containing the two children is as tall as the children?
You need to clear your floats. You can do this via a clearfix class:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container' class="clearfix">
<div id='left'>Left content</div>
<div id='right'>Right content</div>
</div>
or a clearing element:
.clear {
clear:both;
}
#container {
border:solid 3px red;
}
#left {
float: left;
background-color: lightblue;
height: 300px;
}
#right {
float: left;
background-color: coral;
height: 300px;
}
<div id='container'>
<div id='left'>Left content</div>
<div id='right'>Right content</div>
<div class="clear"><!-- --></div>
</div>
Updated Fiddle:
http://jsfiddle.net/JCPEH/5/
This is because floats are not part of the layout until they are cleared.
A float like some other "commands" (like position relative/absolute/fix) removes the element from the normal rendering flow.
One result, it is no longer affecting it's parent element way of rendering.
You can enlighten yourself here
before closing the big div add a <div id="clear"></div> and in css add #clear{clear:both;}
Set the position to absolute for the container, that fixes the problem. http://jsbin.com/ifojug/1/ jsfiddle doesnt work on my browser for some reason
http://jsfiddle.net/55Ruh/9/. Red box doesn't get bigger even if I enter text.
<div class="box" style="background: red">
<div class="lefty">Text</div>
<div class="righty">Text</div>
</div>
.box {
background: red;
width: 229px;
color: white;
}
.lefty {
float: left;
}
.righty {
float: right;
}
http://jsfiddle.net/55Ruh/10/
Float causes the element to get out of the flow of the document.
on parent element:
zoom: 1; /* IE fix */
overflow: hidden;
You can solve this with a "clearing" div, a typical approach:
http://jsfiddle.net/apDU6/
The container collapese when it has only floats inside. You need to clear it to expand it:
<div class="box" style="background: red">
<div class="lefty">Text</div>
<div class="righty">Text</div>
<div class="clear"/>
</div>
.box {
background: red;
width: 229px;
color: white;
}
.lefty {
float: left;
}
.righty {
float: right;
}
.clear {
clear: both;
}
you can use the solution suggested by PeeHaa it does the trick
but for my experience you can simply set the container element's overflew to auto
it does the trick as well