I have encountered a rather pesky bug which only seems to happen with Internet Explorer. I have created a jsFiddle to illustrate my frustration.
<div class="container" style="width: 802px;">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
The 4th block does not clear to the left even though the top three blocks are of the same computed height. Does anyone know of any solution/hack for this?
I need this to work with min-height, not height and I cannot use clear: left.
Thanks in advance,
Ian
The problem is due simply to the fact that the first two blocks are 1 pixel taller than the other two.
This causes the 4th block to catch the right edge of the 2nd block.
If you set the height of .block to 160px, for example, you will see that they wrap as you intended.
This is a common problem if floated elements have non-similar heights.
Note: The reason the behavior may appear to be browser dependent may have to do with the default font and font size that may vary across browsers. If you were to use a slightly smaller font, then the first two blocks would be slightly shorter and all the blocks would then take on the min height of 155px, and be the same, so the problem would not manifest itself. (Set font-size: 0.75em on .block and see what happens!)
$('.block').each(function (i) {
$('body').append('height of block' + i + ': ' + $(this).outerHeight() + '\n');
});
.container {
width: 802px;
border: 1px dotted blue;
overflow: auto;
}
.block {
float: left;
width: 33.333%;
background-color: #bbb;
padding: 40px;
border: 10px solid #fff;
box-sizing: border-box;
min-height: 155px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscing eli.</div>
<div class="block">Lorem ipsum dolor sit amet, consectetuer adipiscin.</div>
<div class="block">Lorel eum</div>
<div class="block">Lorem ipsumdentur parum clari,um.</div>
</div>
Related
I have a series of HTML elements with display: inline-block. They look like boxes. Here's a simplified example:
.box {
display: inline-block;
border: solid darkblue 1px;
padding: 5px;
margin-right: 1em;
text-align: center;
background-color: lightgoldenrodyellow;
}
<div class="box">This<br>is<br>a<br>box</div>
<div class="box">This<br>is<br>a<br>tall<br>box</div>
<div class="box">This box is wider than it is tall<br>and therefore needs no adjustment</div>
What I need is for each box to be at least as wide as it is tall, subject to the following constraints:
CSS only. No JavaScript
The height and width of the boxes cannot be set explicitly (including min and max)
inline-block behaviour is essential. A long line of boxes will need to wrap nicely, automatically
Content within each box should be centre-aligned
I have found a technique that will make an element at least as tall as it is wide but that relies on the fact that a percentage length for margin or padding is relative to the width of the element. There seems to be no equivalent for making a box at least as wide as it is tall.
Is it possible?
I am curious what the use case is that requires this... however I was immediately reminded of an article which covers several techniques that seem like they achieve what you want. The article goes deep into the padding-top trick to create containers that will maintain an "aspect ratio" so to speak.
Conceptually, this is the "trick":
padding-top: height / width * 100%;
Because padding-top (and padding-bottom) assigned to percentage values actually base the measurement of the values on the width of the element, you end up with a reliable aspect ratio div that scales.
Here is the link: https://css-tricks.com/aspect-ratio-boxes/
.box{
display: inline-block;
border: solid darkblue 1px;
padding: 5px;
margin-right: 1em;
text-align: center;
background-color: lightgoldenrodyellow;
}
.box-content{
margin: 0;
padding: 50% 0;
height: 0;
}
<div class="box">
<div class="box-content"> Quae eveniet</div>
</div>
<div class="box">
<div class="box-content">Lorem ipsum, consectetur adipisicing elit. </div>
</div>
<div class="box">
<div class="box-content">facilis quos in repellendus rerum sequi. Magnam dolores commodi rem nemo, aliquam!</div>
</div>
If you want the content to start from the top instead of being vertically centered then change the .box-content padding to padding-bottom: 100%
What I am trying to do is have a div element at a specific Y location, but floating to the left or the right (so that the other text on the page will flow around it). I can't seem to find the right combination of attributes..
position:relative;float:right works but the div is at the top of the containing element
position:relative;top:1in;float:right moves the div down, but the area that the text flows around is still at the top of the area, not the +1in area
position:absolute disables the float entirely
Here is a simple example:
<div style='position:relative;top:1in;float:right;border:0.1in solid;'>
<p>This is on the right</p>
</div>
<p>This is the text that should flow around the textbox. Make as long as needed...</p>
What I really want is regions but no browsers really support this yet.
Any ideas? Thanks..
If you want to offset a float from the top, with text flowing around it, you have to insert another zero-width float above it to achieve the offset. Like this: http://jsfiddle.net/YKYmj/7/
#floater {
float: right;
clear: right;
border: 1px solid gray;
background-color: #ccc;
margin: 10px;
width: 100px;
height: 100px;
}
.wrapper:before {
content: '';
float:right;
height:1in;
}
<div class="wrapper">
<div id="floater">In offset, floated box</div>
<p>Lorem ipsum dolor sit amet, consectetur ...
</div>
<div class='main_container' style='overflow:hidden; height:100%; height: auto !important; min-height:100%; width:100%;'>
<div class='float_left' style='width:100px; height:100%;'>
</div>
<div class='float_right' style='width:100px;'>
</div>
<div class='clear'></div>
<div class='content'>
//elastic content that sometimes makes the page longer or shorter
</div>
</div>
No matter how many tutorials or examples I looked at, nothing is helping me. I've tried many different combinations. As soon as I set main_container to a px height, the sidebars then, correctly, take up 100% of the height. But I can't set a px height for the main container.
EDIT:
example
The content box will not have a static height. So far what happens is that main_container adjusts it's height based on the content box, but the two sidebars don't adjust there height based on the main_containers height.
In addition to Adrift's answer, you are also overriding the height: 100% with the following height: auto !important - the latter overrides the height setting, even though it is not the source of the problem.
Here is a Gist that works on Chrome and most likely also on other modern browsers as well.
This solution uses CSS tables cells that allow the left/right sidebars to take on the height of the central .content panel.
The HTML:
<div class='main_container'>
<div class='left_bar'></div>
<div class='content'>
<p>Elastic content that sometimes makes the page longer or shorter</p>
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
<div class='right_bar'></div>
</div>
The CSS:
.main_container {
display: table;
width: 100%;
}
.left_bar {
display: table-cell;
width: 100px;
background-color: lightgray;
}
.right_bar {
display: table-cell;
width: 100px;
background-color: lightgreen;
}
.content {
padding: 0 20px;
}
Demo Fiddle: http://jsfiddle.net/audetwebdesign/zahPD/
As suggested in other comments, you can specify height: 100% or height: inherit to .main_container as required in your application.
Reference for table-cell: https://developer.mozilla.org/en-US/docs/Web/CSS/display
Backwards Compatibility
Works with IE8 and above.
Div not supports height in percent using xhtml document. You use a trick like this:
.main_container{
position:fixed;
top:0;bottom:0;
right:0;left:0;
}
I've write an example here: http://jsfiddle.net/vF6fY/ take a look to it
I have a the following:
<div class="container">
<div class="sectionA">
</div>
<div class="sectionB">
</div>
</div>
Section A has a red background, Section B has a blue background.
Section A has lots of text in it, making it quite tall, section B does not have much text in it.
How can I make it so that Section A and B are the same height as the parent?
Yes, you can give the childs the same heights as the parent. This will work:
<html>
<head>
</head>
<body>
<div class="container">
<div class="sectionA">Lorem ipsum dolor sit amet.
</div>
<div class="sectionB">Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>
The CSS:
.container{height:200px;width:500px;overflow:hidden}
.sectionA{position:relative;float:left;width:250px;background:blue;height:100%}
.sectionB{position:relative;float:left;width:250px;background:red;height:100%}
If you dont mind about using jquery,
$('.sectionB').css('height', $('.sectionA').outerHeight() );
sectionB css height is set by the sectionA outerHeight.
Take a look to this jsbin.
Hope this helps!
If you want to do this in dynamically, I think you need to use jquery/javascript to handle otherwise you can use height property. Use the suitable highest value for both sections.
Faux-Column Effect Using <div> and CSS
One way of doing this involves adding an extra element as follows:
<div class="container">
<div class="backdrop"></div>
<div class="sectionA">
<p>Text of A... can be on a red background.</p>
<p>Lorem ipsum dolor... and long text block.</p>
</div>
<div class="sectionB">
<p>Text of B... can be on a blue background.</p>
</div>
</div>
I am going to add an extra element <div class="backdrop">, which you could replace with an pseudo-element if so desired.
The appropriate CSS is as follows:
.container {
overflow: hidden;
color: white;
background-color: red;
position: relative;
}
.sectionA {
float: left;
width: 48%;
padding: 1%;
}
.sectionB {
float: left;
width: 48%;
padding: 1%;
position: relative;
z-index: 2;
}
.backdrop {
position: absolute;
background-color: blue;
width: 50%;
height: 3000px;
top: 0;
left: 50%;
z-index: 1;
}
The parent .container element is given the background-color for the left-hand side column (red), with overflow: hidden and position: relative.
The two child/column elements are placed using float: left, and given a relative width of 48% and padding of 1% (you can adjust these measurements as needed).
Finally, .backdrop is positioned absolutely and placed to the right hand side of the parent container. I set it to have a tall height to make sure that it stretches beyond any expected height of any of the two columns, and declare the background-color: blue.
Use z-index to move the floated .sectionB to be painted above .backdrop. Note that you need set position .sectionB relatively so that the z-index value takes effect.
Since .container uses overflow:hidden, the tall backdrop element is clipped so you can the effect that you want.
Using a background-image could also work. You could create a background image with the left hand side red and the right hand side blue, and tile it vertically with position top and center, just making the width is wide enough to accommodate any expected page width.
The main advantage of using div.backdropis that you can alter the color scheme using CSS properties alone without changing the background image.
Fiddle demo: http://jsfiddle.net/audetwebdesign/yejss/
I have some text that I want simultaneously centered on the page and the text within the paragraph to be adjusted to the left? A little help?
this is what I've been trying
<p align="center"><div align="left>text<br>more text</p></div>
obviously not working this just shifts everything left
What the troubling part (although IE is always different) is that in order for an item to be centered the horizontal margins need to be set to auto (allowing the browser to actually center the content). So, with that being said:
p.centered {
margin: 0px auto;
width: 300px;
border: 1px solid #f0f;
}
<p class="centered">This is your paragraph</p>
The width is your call (and I've added a border for clarity) but just set the side margin to auto and the content will be left-aligned (unless otherwise specified by text-align).
align="center" and align="left" are deprecated. Use CSS instead.
Here's one way to do it (assuming you want 2 nested elements, or see Brad's method for centering a single element): http://jsfiddle.net/EzNJQ/1/
<div id="outer">
<p id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
#outer{
width: 300px;
margin: 0 auto; /* centers */
}
#inner {
text-align: left;
}
More examples: http://www.w3.org/Style/Examples/007/center.en.html