I've got a red box and a green one, side-by-side, and centered. When the browser width is smaller than the width of the squares, they break into separate lines. How do I keep them together?
(I tried using a container div with their combined widths, which does the job in keeping them together, but they no longer are centered.)
Any suggestions?
The code:
<body>
<div style='text-align:center;font-size:0'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
</body>
You can run it here: https://plnkr.co/edit/2De21ziNmaeleFmkPuPF?p=preview
This can be done in many ways, here is 3:
Use min-width
<div style='text-align:center;font-size:0; min-width: 400px'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use white-space: nowrap
<div style='text-align:center;font-size:0; white-space: nowrap'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use display: flex;
<div style='text-align:center;font-size:0;display: flex;justify-content: center'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Try using Flex-box
.parent{
display:flex;
border:1px solid green;
width:500px;
}
.parent div{
background:green;
width:100px;
height:100px;
margin:20px;
}
<div class="parent">
<div>cell1</div>
<div>cell2</div>
</div>
Hope this helps
If you give them a fixed width (ex 200+200px), when that div width is passed (ex mobile width of 375px < 400px of divs sum), the last element slide on the next row.
With width of 35% for each other, will look exactly as you want it for that 200px.
<body>
<div style='text-align:center;font-size:0; width: 100%;'>
<div style='display:inline-block;background-color:red; width:35%;height:50px'></div>
<div style='display:inline-block;background-color:green; width:35%;height:50px'></div>
</div>
</body>
Here is the link to your code
EDIT:
Here is a usefull link for understanding better the width options depends of the width of device, and I encourage you to take a deeply look inside of w3schools, or other platforms where you can learn better how to manipulate elements of html, with css and js.
screen-width
Try using width: 50% on the boxes instead of width: 200px.
Related
I'm building a responsive site and having trouble with the floating container. I want it to have four divs directly next to each other with out gaps and without the divs moving onto a new on smaller screens/windows. I've tried a wide range of techniques none of which seem to work. The container should be a maximum of 960px x 460px as each of the divs all have the height of 460px and have a combine width total of 960px.
Try out the font-size hack: http://jsfiddle.net/andunai/bbek5rq6/
Or use Bootstrap.
The idea to remove spaces is to set font-size of those spaces to 0px.
You may want to use a grid framework to ease the development of responsive layouts:
http://getbootstrap.com/css/
http://960.gs/
http://unsemantic.com/
I am rather fond of the Jeet pre-processor framework which can be used with Stylus or SCSS.
Have you considered the super neat flex layout?
.wrap {
max-width: 960px;
height: 460px;
display: flex;
}
.wrap div {
flex: 1;
}
<div class="wrap">
<div style="background:red"></div>
<div style="background:blue"></div>
<div style="background:lime"></div>
<div style="background:cyan"></div>
</div>
I agree that using a framework will make your life easier. To answer your question,the simplest solution is to set a max width for the parent, and then use percentages for the children.
HTML
<div class="wrapper">
<div class="quarter red">
</div>
<div class="quarter green">
</div>
<div class="quarter blue">
</div>
<div class="quarter">
</div>
</div>
CSS
.wrapper {max-width:960px;}
.quarter {width:25%;height:460px;background:#EEE;float:left;}
.red {background:#990000;}
.green {background:#006600;}
.blue {background:#333366;}
You can view this code working here: http://codepen.io/anon/pen/KwdjXo
Updated codepen with placeholder images: http://codepen.io/anon/pen/LEGNYe
How can I achieved aligning of N contiguous divs horizontally with a wrapper whose width is 'auto'?
like:
.boxes{ width:200px;height:200px;float:left; }
<div id="wrapper" style="width:auto;">
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
. . .
</div>
I tried applying display:inline; and display:inline-block; on wrapper but boxes goes into new y after it reaches the browsers/display width?
But setting document's width into fixed will solve the issue but its not what I want.
Also I can easily achieved this using tables but I don't want to do it because my code will look messy and will be hard for me to maintain.
Add
#wrapper
{
white-space: nowrap;
}
and on your boxes class: change float:left to display:inline-block;
FIDDLE
This will keep your boxes from wrapping.
I want to achieve a layout where the outer div is 100% width and height. In this div I will add more divs dynamically. I want to write a css structure that splits the outer div so that each div gets the same space. Actually I want to create a dynamic grid with div elements.
Examples below:
The answer of "Sowmia" is so good but one thing :
you want to sub div have AUTO SIZE and with is solution you can't do this.
my solution is exactly the Sowmia's answer with some changes:
<style type="text/css" >
.main{width:100%; height:100%; background:#F5D0A9; overflow:auto}
.sub{width:auto;
height:auto;
float:left;
background:#8181F7;
margin:4px;
border:solid 1px #2ECCFA}
</style>
and html:
<div class="main">
<div class="sub"></div>
<div class="sub">this is div number 1</div>
<div class="sub">this is div number 2</div>
<div class="sub">if you have a big text this div is bigger than the other
<br />
even you can have a text with some height
</div>
</div>
and this is :
DEMO
with only css its not possible but you can do this with jquery just count div and set their width according to number of div
I am trying to creat a layout like this:
My question is specifically centered around the five boxes. I struggle with the CSS to get it to work. Have you guys got a simple setup for such a layout?
I see that you have fixed width, so here is an example. Widths are not exact for your width, but you can esily set values you need. Main thing here is float:left in small_bottom class which makes div to be shown in one row. overflow:hidden in bottom class makes that div wrap around floating divs (without that it will be shown like there is nothing inside). If you want this depend on browser window width - try using percents in width for small_bottom.
HTML:
<div class="main">
<div class="top"></div>
<div class="bottom">
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
</div>
</div>
CSS:
div{border:solid 1px;}
.main{width:350px; border:solid 1px;}
.top{ height:40px;margin:5px;}
.small_bottom{
float:left;
height:50px;
width:50px;
margin:5px;
}
.bottom{margin:5px; overflow:hidden;}
Here is an example how it looks
<div id="container">
<div id="div1">
</div>
<div id="div2">
</div>
</div>
.given the example above, how do I set the height of div2 as the minimum height of div1? also vice versa by using only css. TIA!
You cant do that using css... not dynamically.
#div1 + #div2 {} will let you target div2 occuring only after div1 but you cant make the height relate to the previous element, you just have to hard code it.
#div1 {min-height: 100px;}
#div1 + #div2 { height: 100px;}
.I figure out another way around it, but not actually by inheriting the size of each other. I decided to create a background image matching the background colors of both divs and then applying it to the container div.
add the same class on both div1 and div2 then set the min height of the class added
<style>
.SomeClass{
height:500px;
min-height: 300px}
</style>
<div id="container">
<div id="div1" class="SomeClass">
</div>
<div id="div2" class="SomeClass">
</div>
</div>