this problem has been bothering me for some time. So I have created some visual descriptions of my problem
First here is my HTML structure I have 6 divs.. the first 3 float left and the last 3 float right. The last image shows the result I want but can't seem to get. Can someone out there help me here
EDIT// Sorry heres my HTML and CSS
<style>
.left { float:left; }
.right { float:right; }
</style>
<div id="container">
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
</div>
NOTE: I Cant do a left right left right left right option because Im getting my data from PHP via a Query to my database.. first query goes left second query goes right.... thanks a bunch
/EDIT
My floats result in this
This is what I want
Float one left , one right, and give first the clear:both property
<div class="left clear"></div>
<div class="right"></div>
<div class="left clear"></div>
<div class="right"></div>
css
.left {float:left}
.right {float:right}
.clear {clear:both}
Example
You can use CSS3 column-count property for this. Write like this:
.parent{
-moz-column-count: 2;
-moz-column-gap: 50%;
-webkit-column-count: 2;
-webkit-column-gap: 50%;
column-count: 2;
column-gap: 50%;
}
.parent div{
width:50px;
height:50px;
margin:10px;
}
.left{
background:red;
}
.right{
background:green;
}
Check this http://jsfiddle.net/UaFFP/6/
Add the first left div, then the first right div and after them add <br style="clear:both"> and repeat the procedure.
Edit: Here's an updated answer:
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
Suppose you have another div in the middle of them. Then use this chronological order:
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
Or if you don't, just add another div that provide a style clear:both to it.
<style type="text/css">
.parent {width:50px; border:1px solid red;}
.left {float:left; }
.right{float:right;}
.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;}
</style>
<body>
<div class="left parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="right parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
Mind it would be odd not to have a central DIV, if that is a case float the parent DIVs left, at say widths of 20% 60% 20%.
column-count is already widely supported - http://caniuse.com/#feat=multicolumn
So if old browsers doesn't bother you consider using it.
Try this:
.leftcolums {
float: left;
}
.rightcolums {
float: right;
}
.clear {
clear: both;
}
<div class="leftcolums">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
</div>
<div class="rightcolums">
<div class="right">4</div>
<div class="right">5</div>
<div class="right">6</div>
</div>
<div class="clear">7</div>
Using the :nth-child selector and clearing after 2 divs:
div {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
div:nth-child(2n) {
background-color: green;
float: right;
}
Live example
Otherwise use this fairly hacky method, which requires no additional markup:
div {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
div:nth-child(n) {
clear: both;
}
div:nth-child(2n) {
background-color: green;
float: right;
margin-top: -50px; //match this to the div height
}
Live example
Related
I have a list of product divs containing two more divs each displayed vertically within - top one containing an image and bottom one text. The text is variable in size so the outer divs size also is variable. These outer divs float left and go 3 to a row until a div with long text happens then the next row starts immediately after that column, leaving a gap.
So if I have a row where the 2nd div has 3 lines of text to the other two's 1, the 4th div will start not in the first position on the next line but in the 3rd.
Here is an image demonstrating what I see now vs a second what I would like to do:
And what I'm aiming to do
Do not use float. Take a look at this fiddle:
JSFiddle Demo
CSS:
.block {
width: 33.33%;
display: inline-block;
vertical-align: top;
margin-right: -3px;
}
.inner {
min-height: 100px;
margin-bottom: 10px;
background: #000;
}
You can create a row for the div elements, this will produce the layout you need! I have also provided a CSS only solution where the class clearfix will do the same thing as row class!
CSS3:
.row{
display:flex;
}
.box{
background-color:grey;
float:left;
margin:3px;
width:100px;
height:100px;
}
<div class="row">
<div class="box">1</div>
<div class="box" style="height:200px;">2</div>
<div class="box">3</div>
</div>
<div class="row">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.box{
background-color:grey;
float:left;
margin:3px;
width:100px;
height:100px;
}
<div class="clearfix">
<div class="box">1</div>
<div class="box" style="height:200px;">2</div>
<div class="box">3</div>
</div>
<div class="clearfix">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
HTML
<div class="flex-container">
<div class="box">img</div>
<div class="box">img</div>
<div class="box">img</div>
</div>
<div class="flex-container">
<div class="box">txt</div>
<div class="box">txt</div>
<div class="box">txt</div>
</div>
CSS
.flex-container{
background:red;
display:flex;
width:100%;
height:auto;
margin:0% auto;
padding:1% 0;
}
.box{
min-width:100px;
height:auto;
padding:1%;
margin:0 1%;
flex-grow:1;
background:green;
}
Also, Please chech whether you have cleared all floats
Please see Using CSS Flexible Boxes MDNweb docs
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 100%;
}
Please look at my code at JS Fiddle
I'm wanting to get div 1 to stretch the height of both divs 2 and 3, like you would do with table's rowspan.
I'm not proficient enough with understanding how to do table stuff in divs to figure this one out.
Thanks!
You can use the table/table-cell display css options.
UPDATED Fixed stretching issue.
<div style="display:table">
<div style="display:table-cell;height:100%;" class="div1">
1
</div>
<div style="display:table-cell;width:100%">
<div class="div2">2</div>
<div class="div2">3</div>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/pho5p7cc/8/
Here's what I would do. Create a div around all of your current div, then use css positioning to edit the lengths within the div.
Here's an example,
http://jsfiddle.net/tjgerot/v2469Leu/
<div class="table">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
</div>
I would use a container to hold your DIV 2,3. Then margin the left of the container to allow space for your DIV 1.
Im not sure it's the smoothest way to code, but it works.
https://jsfiddle.net/pho5p7cc/3/
html
<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>
css
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 50px;
margin-left:20px;
}
.container{
}
Sorry guys for the really simple question but I have tried to float one div left and one right with predefined widths along these lines
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
Although this 'mostly' works it seems to mess up the other elements on the page below it.
So what is the correct why to split a HTML page vertically into two parts using CSS without effecting other elements on the page?
you can use..
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
<div style="clear:both"></div>
now element below this will not be affected.
Just add overflow:auto; to parent div
<div style="width: 100%;overflow:auto;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
Working Demo
I guess your elements on the page messes up because you don't clear out your floats, check this out
Demo
HTML
<div class="wrap">
<div class="floatleft"></div>
<div class="floatright"></div>
<div style="clear: both;"></div>
</div>
CSS
.wrap {
width: 100%;
}
.floatleft {
float:left;
width: 80%;
background-color: #ff0000;
height: 400px;
}
.floatright {
float: right;
background-color: #00ff00;
height: 400px;
width: 20%;
}
There can also be a solution by having both float to left.
Try this out:
Working Demo
P.S. This is just an improvement of Ankit's Answer
Check out this fiddle:
http://jsfiddle.net/G6N5T/1574/
CSS/HTML code:
.wrap {
width: 100%;
overflow:auto;
}
.fleft {
float:left;
width: 33%;
background:lightblue;
height: 400px;
}
.fcenter{
float:left;
width: 33%;
background:lightgreen;
height:400px;
margin-left:0.25%;
}
.fright {
float: right;
background:pink;
height: 400px;
width: 33.5%;
}
<div class="wrap">
<!--Updated on 10/8/2016; fixed center alignment percentage-->
<div class="fleft">Left</div>
<div class="fcenter">Center</div>
<div class="fright">Right</div>
</div>
This uses the CSS float property for left, right, and center alignments of divs on a page.
Alternatively, you can also use a special function known as the linear-gradient() function to split browser screen into two equal halves.
Check out the following code snippet:
body
{
background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}
Here, linear-gradient() function accepts three arguments
90deg for vertical division of screen.( Similarly, you can use 180deg for horizontal division of screen)
lightblue color is used to represent the left half of the screen.
skyblue color has been used to represent the right half of the split screen.
Here, 50% has been used for equal division of the browser screen. You can use any other value if you don't want an equal division of the screen.
Hope this helps. :)
Happy Coding!
Here is the flex-box approach:
CSS
.parent {
display:flex;
height:100vh;
}
.child{
flex-grow:1;
}
.left{
background:#ddd;
}
.center{
background:#666;
}
.right{
background:#999;
}
HTML
<div class="parent">
<div class="child left">Left</div>
<div class="child center">Center</div>
<div class="child right">Right</div>
</div>
You can try the same in js fiddle.
I have a parent div of height 100 px but full width (default).
Inside it I have a lot of 20px by 20px divs.
When the child divs are about to reach the bottom, I want the next ones to start wrapping.
That is, they should start displaying alongside to the right.
In other words I don't want scrolling to happen. But wrapping.
<div id="parent" style="height:100px">
<div style="height:20px;width:20px"></div>
<div style="height:20px;width:20px"></div>
<div style="height:20px;width:20px"></div>
<div style="height:20px;width:20px"></div>
<div style="height:20px;width:20px"></div>
<div style="height:20px;width:20px"></div>
<div style="height:20px;width:20px"></div>
<div style="height:20px;width:20px"></div>
............
</div>
You can use CSS3 columns - http://jsfiddle.net/spbqh/
#parent {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
background: #eee;
}
div > div {
height: 20px;
width: 20px;
background: beige;
}
You could try using CSS3 columns. Unfortunately, they only work on Firefox and Chrome for now, I believe, so it doesn't work in IE.
http://jsfiddle.net/Lf5Ma/
<div id="parent">
<div id="test">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<!-- Snip -->
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
...and the CSS:
#parent{
position:relative;
height:110px;
width:100%;
border:1px solid red;
}
#test{
height:100%;
-webkit-column-width:25px;
-moz-column-width:25px;
column-width:25px;
-webkit-column-gap:0px;
-moz-column-gap:0px;
column-gap:0px;
}
.child{
width:20px;
height:20px;
border:1px solid #000;
}
EDIT:
I found a javascript-based column script that could work. It looks like you just add the javascript after your stylesheets, and you can go ahead and use the new column properties without having to make any modifications. I've verified it works in IE 9, at the very least.
I know how to make 2 divs float side by side, simply float one to the left and the other to the right.
But how to do this with 3 divs or should I just use tables for this purpose?
Just give them a width and float: left;, here's an example:
<div style="width: 500px;">
<div style="float: left; width: 200px;">Left Stuff</div>
<div style="float: left; width: 100px;">Middle Stuff</div>
<div style="float: left; width: 200px;">Right Stuff</div>
<br style="clear: left;" />
</div>
The modern way is to use the CSS flexbox, see support tables.
.container {
display: flex;
}
.container > div {
flex: 1; /*grow*/
}
<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>
You can also use CSS grid, see support tables.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}
<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>
It is same way as you do for the two divs, just float the third one to left or right too.
<style>
.left{float:left; width:33%;}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
float them all left
make sure a width is specified that they can all fit in their container (either another div or the window), otherwise they will wrap
<br style="clear: left;" />
that code that someone posted up there, it did the trick!!!
when i paste it just before closing the Container DIV, it helps clear all subsequent DIVs from overlapping with the DIVs i've created side-by-side at the top!
<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!-- then magic trick comes here -->
<br style="clear: left;" />
</div>
tadaa!! :)
Float all three divs to the left. Like here:
.first-div {
width:370px;
height:150px;
float:left;
background-color:pink;
}
.second-div {
width:370px;
height:150px;
float:left;
background-color:blue;
}
.third-div {
width:370px;
height:150px;
float:left;
background-color:purple;
}
<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>
<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>
the advantage of this way is you can set each column width independant of the other as long as you keep it under 100%, if you use 3 x 30% the remaining 10% is split as a 5% divider space between the collumns
I usually just float the first to the left, the second to the right. The third automatically aligns between them then.
<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>
you can float: left for all of them and set the width to 33.333%
try to add "display: block" to the style
<style>
.left{
display: block;
float:left;
width:33%;
}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
I didn't see the bootstrap answer, so for what's it's worth:
<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />
let Bootstrap figure out the percentages.
I like to clear both, just in case.
I prefer this method, floats are poorly supported in older versions of IE (really?...)
.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }
UPDATED :
Of course, to use this technique and due to the absolute positioning you need to enclose the divs on a container and do a postprocessing to define the height of if, something like this:
jQuery(document).ready(function(){
jQuery('.main').height( Math.max (
jQuery('.column-left').height(),
jQuery('.column-right').height(),
jQuery('.column-center').height())
);
});
Not the most amazing thing in the world, but at least doesn't break on older IEs.
But does it work in Chrome?
Float each div and set clear;both for the row. No need to set widths if you dont want to. Works in Chrome 41,Firefox 37, IE 11
Click for JS Fiddle
HTML
<div class="stack">
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
</div>
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
<div class="col">
Three
</div>
</div>
</div>
CSS
.stack .row {
clear:both;
}
.stack .row .col {
float:left;
border:1px solid;
}
Here's how I managed to do something similar to this inside a <footer> element:
<div class="content-wrapper">
<div style="float:left">
<p>© 2012 - #DateTime.Now.Year #Localization.ClientName</p>
</div>
<div style="float:right">
<p>#Localization.DevelopedBy Leniel Macaferi</p>
</div>
<div style="text-align:center;">
<p>☎ (24) 3347-3110 | (24) 8119-1085 ✉ #Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
</div>
</div>
CSS:
.content-wrapper
{
margin: 0 auto;
max-width: 1216px;
}
#Leniel this method is good but you need to add width to all the floating div's. I would say make them equal width or assign fixed width. Something like
.content-wrapper > div { width:33.3%; }
you may assign class names to each div rather than adding inline style, which is not a good practice.
Be sure to use a clearfix div or clear div to avoid following content remains below these div's.
You can find details of how to use clearfix div here
display: table;If text needs to appearas if on the same line
In other words; if the vertical alignment of text in each <div> needs to be identical, one can attempt a modern retro throwback to yesteryear with the somewhat controversial table styling:
.container {display: table;}
div {display: table-cell;}
This proved to be quite useful to format CSL-styled citations in Pandoc, as shown below:
div.csl-bib-body {}
div.csl-entry {
margin-top: 1rem;
display: table;
}
div.csl-left-margin {
display: table-cell;
}
div.csl-right-inline {
padding-left: 1ex;
display: table-cell;
}
The citation number div and the citation data div are now shown at the exact same height.