I am trying to space out DIVs. I have five DIVs that are 30px wide and want to put these into another DIV that is 150px wide. Sounds simple but I find the five DIVs don't fit.
5*30 = 150 (but it requires a 166px outer div for them to fit inline)
I have this fiddle
<div class="A">
<div class="B" >a</div>
<div class="B" >b</div>
<div class="B" >c</div>
<div class="B" >d</div>
<div class="B" >e</div>
<div class="B" >f</div>
</div>
div.A { background-color: Red; width: 150px;}
div.B { display: inline-block; height: 20px; width: 30px;}
Is there something I am missing? I can't understand why the browsers space the way they do.
As you are turning the divs into inline elements, the other inline content will also come into play, i.e. the white space between the elements. You get a space between each div, which takes up a few pixels more.
If you remove the white space between the divs, there will be no spaces between them, and five elements fit in 150 pixels:
http://jsfiddle.net/SLq6z/1/
Can you replace display:inline-block with float:left without causing any other issues? it solves your current problem...
div.B { float:left; height: 20px; width: 30px;}
Use float:left property for both your classes A and B ;).
Related
I have been reading widely about this but haven't been able to solve it to my satisfaction.
I have a div (<section>) that contains one <p> and 3 <div>s. I would like to distribute the 3 divs equally in one line so that the left border of the 1st div is on the left border of the document (<body>) and the the right border of the 3rd div on the right border of the document.
I don't want to use float because the backround-color would vanish.
I have tried flex but justify-content did not yield the expected outcome.
Here's the code on JSBIN.
Thank you!
You can use display: flex on the container, and set the width of the three div elements to take up one third (or as close as we can get) of its container. The container must have a set width (either pixel or percentage) for it to work.
#container {
display: flex;
height: 600px;
width: 600px;
background-color: lightgreen;
}
#container div {
border: 1px solid black;
margin: 0 10px;
width: 33.333333%;
}
#container div img {
width: 100%;
}
<div id="container">
<div id="content1">
I'm some content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/P8z2H80.jpg">
</div>
<div id="content2">
I'm some more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/NfnBZAI.jpg">
</div>
<div id="content3">
I'm even more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/W8M37N2.jpg">
</div>
</div>
I'm looking for the simplest way to achieve a type of layout that looks simple:
...but actually involves a lot of criteria, many of which involve non-trivial CSS issues:
Vertically centred content in a div...
...where the content is of variable length (so distance from top and bottom can't be hard coded)...
...where the div is inside a selection of floated divs...
...where those divs have percentage widths to fill the screen on a responsive layout...
...where there is a fixed pixel gap between each div...
...where the divs have solid background colours or images and the background behind the divs isn't a known solid colour that can be re-applied
Various elements of this have been addressed in separate questions (for example vertically aligning floated divs, and pixel gaps between responsive percentage-width divs), but I couldn't find anything combining them.
Simplest means:
As few HTML wrappers as possible
Minimal extra Javascript (none if possible)
Minimal CSS that needs to change when breakpoints change the number of divs on each row
Minimal code, quirks, or fragile CSS trickery (e.g. relying on browser quirks that could change in future)
Minimal cross browser issues (ideally, should work on IE8+ with minimal IE-specific markup)
Here's the simplest I can come up with. Code snippet below. It's basically an existing method for vertically centring floats, putting the background on the middle wrapper, and setting fixed pixel gaps using padding on the outer wrapper rather than margins with box-sizing: border-box;.
JSBIN demo
Three HTML elements per block - which seems to be the minimum for any floated vertically centred content where the inner content doesn't have a known height.
No JS
Only the % width needs to change to change the number of blocks per line
If the text content is too big for the div, the div expands slightly without breaking the layout - overflow: hidden; can be applied if this is undesirable
Works on IE8 with no issues (fails on IE7 if any poor souls still need to support IE7)
.box-outer {
box-sizing: border-box;
float: left;
/* editable */
width: 50%;
height: 110px;
padding: 1px 1px 0px 0px; /* sets gap */
/* Padding does't collapse like margins - 1px all round gives 2px gaps */
}
.box {
width: 100%;
height: 100%;
box-sizing: border-box;
display: table; /* height doesn't fill without display: table */
/* editable: */
background: #99ffff;
padding: 8px;
}
.box-inner {
vertical-align: middle;
display: table-cell;
}
.boxes-container {
padding: 0px 0px 1px 1px; /* opposite of each box's padding */
/* editable: */
background: #ffffff url('http://freedesignfile.com/upload/2012/10/sky_clouds_03.jpg');
}
<div class="boxes-container clearfix">
<h2> Title </h2>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box content
</div>
</div>
</div>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box with longer content
</div>
</div>
</div>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box
</div>
</div>
</div>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box with significantly longer textual content
</div>
</div>
</div>
<br/>
<p style="text-align: center;"> <--- responsive width ---> </p>
</div>
I have a div which has css style float:right.
The problem is, I want to align some text in the div to be in center. However, the text is always at left side. I use text-align:center but it useless.
I appreciate for any help. Thanks!
Here is my code:
<div style='float:right'>
<span style='text-align:center'>some text...</span>
</div>
You have to set display:block; to the span element .. here's a fiddle
To text-align:center the text inside a floated div, the width of the width should be greater than the containing element.
For example: assume your span tag has some text which occupies 100px. When you float the parent element to left or right, it will be floated correspondingly and takes the width as 100px because you haven't specified a width for it. So specify a width for it, in you case the div which is floated left.
Try this:
<div style='float:right; width:200px; text-align:center;background:red;'>
<span style='text-align:center'>some text...</span>
</div>
You can remove the background-color since i gave it for reference.
OR
You can even specify a width for the element which you want to center align. In your case since span is an inline element, you have to specify a width and also give it display:block
<div style='float:right; background:red;'>
<span style='text-align:center; width: 200px; display:block;'>some text...</span>
</div>
You need to but text-align:center in th div
see this jsfiddle
css
div
{
float: right;
width: 200px;
height: 200px;
border: solid 1px;
text-align:center;
}
It's because you have never defined a width for the div. So the text is centered, because the div is only as wide as the text. Try giving the div a width of 50% (or how ever wide you want it) then applying text-align:center.
<div style='float:right;width:50%;text-align:center;'>
<span>some text...</span>
Set display: block for the span tag
<div style="float: right; width: 200px; height: 200px; border: 1px solid gray;">
<span style="text-align: center; display: block;">some text...</span>
</div>
make the span a div and it will work (I just gave the container a width and a border, so that you can see the effect better):
<div style='float:right; width:200px; border:1px solid #000'>
<div style='text-align:center'>some text...</div>
</div>
DEMO HERE
I recently decided to ditch tables and go with a div solution on this new project, however I'm having a really weird issue when setting a div within another div to 100% without it causing overflow equal to the height of the div's above it. It's acting like the browser isn't aware of the div's above it occupying that space.
I have a wrapper div with a fixed width and height set to 100%, within that is 3 column divs (left, mid and right) in the mid column I have 3 div's, the top 2 have fixed heights 90px and the 3rd is set to 100% to fill the rest of the content area but it's breaking out of the wrapper div and causing exactly 180px overflow. I setup this simple layout on JSFiddle: Height: 100% Div Issue
<body>
<div class="wrapper">
<div class="left">
<div style="background-color:fuchsia; height: 90px;"> </div>
</div>
<div class="mid">
<div style="background-color:purple; height: 90px; width: 998px;"> </div>
<div style="background-color:blue; height: 90px; width: 998px;"> </div>
<div style="background-color:black; height: 100%; width: 50%;"> </div>
</div>
<div class="right">
<div style="background-color:fuchsia; height: 90px;" class="right"> </div>
</div>
</div>
You will notice the black div is breaking out of the yellow (mid) div, this should not happen! Any help would be greatly appreciated. Thanks!
You're specifying a height of 100% on the black div, which ends up being relative to its parent (.mid) which also happens to contain the other elements that you gave 90px of height to. You have to account for those two siblings.
You can do this by using the calc() notation, though mobile browser support is bad and the function isn't supported in IE8 & below.
http://jsfiddle.net/KtUgF/5/
You can also use a negative top-margin on the black div equal to the sum of both of its siblings (180px):
http://jsfiddle.net/yrfnc/
This should fix the issue
height: 100vh;
Any reason why you can't just add overflow: hidden to the ".mid" div?
<div class="mid" style="overflow:hidden">
or
.mid {
float: left;
width: 998px;
height: 100%;
background-color: yellow;
overflow: hidden;
}
I have a div that holds some text, it has a background with a border, but for some reason the box is not expanding to the text, even with overflow: auto; here is my script for the box as well as a picture:
.box { background: #ffdcba; border: 1px solid #f78d25; display: block; clear: both; margin: 4px 0px; padding-left: 15px; overflow: auto; }
the divs inside are just floating, left and right, and have display: inline on them. heres a picture:
http://i45.tinypic.com/2woj1br.gif
A floated box will not expand to fit its contents. You need to add a clearing element after your content. <br> is usually good.
YOu don't specify the exact construction of the HTML, but I"m asssuming you've got something like this:
<div class="box">
<div style="float: left">test subject></div>
<div style="float: right">
<div>ASD</div>
etc...
</div>
</div>
Floating elements removes them from the regular flow and will cause the "overflow" you are seeing. You need to add a non-floated element below the floated parts to force the containing div.box to "expand" to contain the floats:
<div class="box">
<div style="blah blah" ....
etc....
<br style="clear: both" />
</div>
As well, the overflow: auto will not have any effect on your .box style, because it does not specify any height or width - it will naturally just expand to contain whatever content you put in there. To force a scrollbar to appear, you need to put in either height or width styling, and enough content to exceed either of the limits.