Consider the following HTML structure,
<div class='floated' id='div1'></div>
<div class='floated' id='div2'></div>
<div class='floated' id='div3'></div>
with the following CSS:
.floated {
width: 50%;
float: left;
}
#div1 {
height: 300px;
background-color:red;
}
#div2 {
height: 30px;
background-color: green;
}
#div3 {
height: 30px;
background-color: yellow;
}
This way, #div1 will take up a 300px tall part of the left side of the page, while #div2 and #div3 will get floated to the right side of the page. How could I set up my CSS, so #div1 and #div2 takes up a single row(of height 300px, the maximum height of the two), and #div3 will be placed right below #div1?
I am not controling the height of these divs, this is dynamic, it is possible that sometimes the first one will be only 20 pixels, and the second one will be 1000 pixels, and the other way around is also a possibility
Here's a fiddle: https://jsfiddle.net/1u55fukj/
You can use Flexbox on parent element (body in this case) and use flex-wrap: wrap. This will always make both div's in same row equal height or equal to height of taller one DEMO
body {
display: flex;
flex-wrap: wrap;
}
.floated {
flex: 0 0 50%;
}
#div1 {
height: 300px;
background-color: red;
}
#div2 {
background-color: green;
}
#div3 {
height: 30px;
background-color: yellow;
}
<div class='floated' id='div1'></div>
<div class='floated' id='div2'></div>
<div class='floated' id='div3'></div>
If there will be only 2 divs in row, then you can try to give clear:left to odd child.
.floated {
width: 50%;
float: left;
}
#div1 {
height: 300px;
background-color: red;
}
#div2 {
height: 30px;
background-color: green;
}
#div3 {
height: 30px;
background-color: yellow;
}
div.floated:nth-child(odd) {
clear: left
}
<div class='floated' id='div1'>
</div>
<div class='floated' id='div2'>
</div>
<div class='floated' id='div3'>
</div>
flexbox is your best option i think.
you could use a div container and then use display flex
.container{
height: 500px;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.floated {
width: 50%;
}
#div1 {
height: 30%;
background-color:red;
}
#div2 {
height: 60%;
background-color: green;
}
#div3 {
height: 40%;
background-color: yellow;
}
<div class="container">
<div class="floated" id="div1"></div>
<div class="floated" id="div2"></div>
<div class="floated" id="div3"></div>
</div>
you can also center the 3rd div and a lot more :D. Flexbox have a good crossbrowsing support using -moz-, -webkit- etc,
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
I use display: inline-block for div.left - div.right and div.red - div.yellow but none of them are in the same line. I set the width exactly. But it does not work at all.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 auto;
width: 800px;
}
.left, .right, .red, .yellow {
display: inline-block;
vertical-align: top;
}
.left {
width: 250px;
height: 500px;
background: gray
}
.right {
width: 550px;
height: 550px;
background: blue;
}
.red {
background: red;
width: 275px;
height: 200px;
}
.yellow {
background: yellow;
width: 275px;
height: 200px;
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="red-yellow">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
</div>
Update
If you need to keep inline-block styles, you need the .left and .right divs to add up to 800px. The thing with inline-block is that it will include white space and add it to the width. This is why the wrapping is still occurring. The following image shows the white space that is causing the wrapping.
There are many ways to remove white space and make this fit. One way is to add an HTML comment between the .left and right div, which removes all white space.
<div class="container">
<div class="left"></div><!--
--><div class="right">
<div class="red-yellow">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
</div>
Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 auto;
width: 800px;
}
.left, .right, .red, .yellow {
display: inline-block;
vertical-align: top;
}
.left {
width: 250px;
height: 500px;
background: gray
}
.right {
width: 550px;
height: 550px;
background: blue;
}
.red {
background: red;
width: 275px;
height: 200px;
}
.yellow {
background: yellow;
width: 275px;
height: 200px;
}
<div class="container">
<div class="left"></div><!--
--><div class="right">
<div class="red-yellow">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
</div>
If you add display: flex to the .container, the immediate children (.left and .right) will align in the same row. The .right div is 50px taller than the .left div because of the explicit width being set (550px for .right, 500px for .left).
Also, you can remove this, as it will no longer have any effect due to the flexbox container.
.left, .right, .red, .yellow {
display: inline-block;
vertical-align: top;
}
Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 auto;
width: 800px;
display: flex;
}
.left {
width: 250px;
height: 500px;
background: gray
}
.right {
width: 550px;
height: 550px;
background: blue;
}
.red {
background: red;
width: 275px;
height: 200px;
}
.yellow {
background: yellow;
width: 275px;
height: 200px;
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="red-yellow">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
</div>
if use display: inline-block , there will be some space between the elements. In order to overcome that u can use float property so that every element will be aligned in the same line.
If u want to go with display: inline-block property, you have to reduce the width of .red and .yellow,say for example
.red,.yellow{ width: 270px}
JSFiddle
HTML:
<div class="leftwrapper">
<div class="left">left div</div>
<div class="middle">middle div</div>
</div>
<div class="right">right div</div>
CSS:
.leftwrapper{
float: left;
width: 75%;
}
.left{
float:left;
background:green;
width: 30%;
max-width: 75px;
}
.middle{
background: blue;
overflow: hidden;
}
.right{
float: right;
background:red;
width: 30%;
max-width: 75px;
}
In the above example, I would like to:
Keep all three divs on the same line when resizing the browser (currently, the right div moves beneath the left),
Make it so the blue/middle div resizes to fill the space between left and right. As it stands, when you expand the browser the margin grows. How do you keep it consistent?
As a note: the structure of the HTML divs is intentional ('leftwrapper' containing two divs, floating alongside the right div), so please no answers involving restructuring of the divs!
I would add a flex parent, and use flex-grow to make the elements grow to fill the available space where you want that to happen.
.flex {
display: flex;
}
.grow {
flex-grow: 1;
}
.middle {
background: blue;
}
.left {
background: green;
width: 30%;
max-width: 75px;
}
.right {
background: red;
width: 30%;
max-width: 75px;
}
<div class="flex">
<div class="leftwrapper flex grow">
<div class="left">left div</div>
<div class="middle grow">middle div</div>
</div>
<div class="right">right div</div>
</div>
Change your CSS to this and it'll work nicely.
.leftwrapper {
float: left;
width: 100%;
max-width: calc(100% - 75px);
}
.middle {
background: blue;
overflow: hidden;
}
.left {
float: left;
background: green;
width: 30%;
max-width: 75px;
}
.right {
float: left;
background: red;
width: 30%;
max-width: 75px;
}
What I've done is change the width of .leftwrapper to 100% but added in a max-width property and used calc() to ensure it's also 75px smaller than 100% of the space it can fill up. That way resizing the viewport ensures it stays on one line nicely.
MDN information about calc().
#j.winslow I just updated the JSFIDDLE http://jsfiddle.net/enRkR/1232/
I add this:
.leftwrapper{
float: left;
width: 100%;
max-width: calc(100% - 75px);
}
This is what you're looking for? Regards!
I am a new learner in web designing and practicing websites. I want to align 2 divs in one line without using float. I have a parent div with width 1400px. I want 2 child divs of width 600px each to align next to each other and have equal margin from both sides. Below is my code. Please suggest.
Also, what changes does float make to DOM? I observed that if I use float I need to specify the height as well? Is it the case or I was making some mistake in understanding the role of float?
<html>
<head>
<title>
My Page
</title>
</head>
<body>
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
</body>
</html>
.main{
width:1400px;
background-color:#c3c3c3;
position: relative;
display: inline-block;
}
.child1{
background-color:#666;
width: 600px;
margin:auto;
}
.child2{
background-color:#888;
width : 600px;
margin:auto;
}
you can do like this.
.main {
width: 1400px;
background-color: #c3c3c3;
position: relative;
text-align: center;
}
.child1 {
background-color: #666;
width: 600px;
margin: auto;
display: inline-block;
}
.child2 {
background-color: #888;
width: 600px;
margin: auto;
display: inline-block;
}
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
Or you can Improve you css to this.
.main {
width: 1400px;
background-color: #c3c3c3;
position: relative;
text-align: center;
}
.main div {
display: inline-block;
width: 600px;
margin: auto;
}
.main div.child1 {
background-color: #666;
}
.main div.child2 {
background-color: #888;
}
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
You can use flexbox like this:
.main {
display: flex;
justify-content: space-between;
}
Can be done with:
.main div { display: inline-block; }
Expect a whitespace between the divs.
This should do the trick (at least roughly):
.main{
width:1400px;
background-color:#c3c3c3;
position: relative;
display: table-row;
}
.child1{
background-color:#666;
width: 600px;
margin:auto;
display: table-cell;
}
.child2{
background-color:#888;
width : 600px;
margin:auto;
display: table-cell;
}
Float is really intended to put a picture (or a similar element) on one side of the page and have the text flow around it. It's often "abused" to pack elements next to each other horizontally, but that creates its own problems.
A lot of the answers you've been given are good, and people have been doing this since CSS became a thing. Another way you can do it, and really whichever method you'd like depends solely on your circumstances is by using position:relative on the parent wrapper, and position:absolute any the child elements.
.wrapper {
border: 1px solid red;
min-height: 50vh;
min-width: 100vw;
position: relative;
}
.wrapper > div {
position: absolute;
}
.wrapper .first {
top: 0;
left: 0;
width: 48vw;
border:1px dotted green;
height:100%;
}
.wrapper .second {
top: 0;
right: 0;
width: 48vw;
border:1px dashed orange;
height:100%;
}
<div class="wrapper">
<div class="first">
This is content number 1
</div>
<div class="second">
This is content number two.
</div>
</div>
Another way is by setting the container div to display as a row, and then have the two child elements be displayed as table cells. Tables were kind of the old-go-to back before CSS became extensive (can you believe there was a time before border-radius?)
.wrapper {
display: table-row;
background-color: red;
width: 100%;
height: 50vh;
}
.wrapper > div {
display: table-cell;
width: 48%;
}
.first {
border: 1px solid orange;
}
.second {
border: 1px dotted green;
}
<div class="wrapper">
<div class="first">
First Child
</div>
<div class="second">
Second Child
</div>
</div>
Really there's a bunch, you just need to figure out which one works best for you.
I am trying to create the following structure using embedded divs inside a header:
The height and width of the red part is known and fix
The height of the green rectangle is known and fix
The overall width of the frame can vary, but is never smaller than the red part
I have tried with the following html code:
<header id="header">
<div id="yellowAndGreen">
<div id="yellow"></div>
<div id="green"></div>
</div>
<div id="red"></div>
</header>
and the following CSS:
#header {
width: 400px;
}
#yellowAndGreen {
}
#yellow {
background-color: yelow;
}
#green {
background-color: green;
height: 40px;
}
#red {
height: 150px;
width: 150px;
background-color: red;
}
but it does not work. I have created a JsFiddle. Can anyone modify it to create what I am looking for?
Use float:right; to make the red box float to the right. You'll need to adjust the html:
<header id="header">
<div id="alldivs">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
</header>
and the css:
#header {
width: 400px;
}
#yellow {
background-color: yellow;
height:110px;
}
#green {
background-color: green;
height: 40px;
}
#red {
height: 150px;
width: 150px;
background-color: red;
float:right;
}
Please note you had misspelled "yellow", and that you need to set a height for the yellow <div>.
Finally here is the adjusted fiddle
Hope this helps
This uses flexbox, which has some support drop off on older browsers. I've excluded vendor-specific attirbutes for simplicity.
#header {
width: 400px;
display: flex;
}
#yellowAndGreen {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
#yellow {
background-color: yellow;
flex-grow: 1;
}
#green {
background-color: green;
height: 40px;
}
#red {
height: 150px;
width: 150px;
background-color: red;
}
No floats or flexbox necessary!
Rearranged your HTML a bit. Set #header background-color to red and min-width so it will never be too small. Use calc() for #yellow's width so that the background red of it's parent will always be 150px wide.
#header {
width: 400px;
background-color: red;
width: 100%;
min-width: 150px;
}
#yellow {
height: 150px;
width: calc(100% - 150px);
background-color: yellow;
}
#green {
background-color: green;
height: 40px;
}
<header id="header">
<div id="yellow"></div>
<div id="green"></div>
</header>
I don't think this is possible in pure CSS. I have three floated elements within a wrapping container and I want the central of the three to be the width of its content and those either side to fill in the remaining gaps left and right of this element.
<style>
.wrap {
width: 50%;
height: 100px;
background: green;
}
.cont {
background: red;
float: left;
display: inline-block;
height: 100px;
}
.c1, .c3 {
background: blue;
width: auto;
}
</style>
<div class="wrap">
<div class="cont c1"> </div>
<div class="cont c2">content</div>
<div class="cont c3"> </div>
</div>
http://jsfiddle.net/6eLdboqw/1/
I realise this is trivial in Javascript but I want to know if there's a pure CSS solution.
You could accomplish this by using CSS tables, with the middle div having a width of 1% to 'auto shrink':
.wrap {
width: 400px;
height: 100px;
background: green;
display: table;
}
.cont {
background: red;
display: table-cell;
height: 100px;
}
.c1,
.c3 {
background: blue;
width: auto;
}
.c2 {
width: 1%;
}
<div class="wrap">
<div class="cont c1"> </div>
<div class="cont c2">content</div>
<div class="cont c3"> </div>
</div>
You could do so using flexbox.
Here is a demo: http://jsfiddle.net/6eLdboqw/3/
.wrap {
width: 400px;
height: 100px;
background: green;
display: flex;
}
.c1,
.c3
{
flex: 1 1 auto;
}
.c2
{
flex: 0 0 auto;
}
.cont {
background: red;
height: 100px;
}
.c1, .c3 {
background: blue;
width: auto;
}
flex is the short-hand property for: flex-grow, flex-shrink, flex-basis.
So what we do is: .c1, .c3 may grow and shrink, but .c2 may not grow or shrink.