Please reference the following example:
Requirements:
Have one element floated right.
Have another element clear first, and floated left.
Have text flow and wrap all floated elements.
This seems like a dead simple example of using floats in a layout, and yet there seems like no possible way to do it in IE7.
In the given example, IE7 doesn't respect the clear, and both elements float to the top:
<!-- Floated blocks -->
<div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
<div style="float:left; clear:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
<!-- Wrapping text -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisi tellus. Ut ac iaculis erat. Integer nec turpis mi, quis placerat eros. Donec suscipit eros vel nulla vulputate cursus. Aenean ut augue nisi, a sagittis velit. Mauris eget velit at felis feugiat consequat. Sed interdum lobortis porttitor. Vestibulum ultrices posuere ipsum id posuere.</p>
<p>Nam imperdiet, orci sed faucibus tempus, arcu est pretium mauris, in mollis tellus augue imperdiet elit. Maecenas mi nunc, rhoncus in feugiat et, varius at lacus. Etiam at iaculis libero. Phasellus eu ipsum tortor. Maecenas non purus dolor. Suspendisse risus felis, varius et porttitor eu, ultricies a orci. Nullam ac ipsum diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed convallis suscipit eros consequat sollicitudin. </p>
<p>Morbi facilisis aliquet rutrum. Vestibulum dignissim neque velit. Nunc auctor, ante nec placerat commodo, metus felis dignissim metus, sit amet aliquet sem nisi eget neque. Morbi diam massa, porttitor ac egestas at, bibendum id mauris. Phasellus at leo at est lobortis ullamcorper at vel dolor. Suspendisse tincidunt lobortis quam a luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris id metus id mauris rhoncus adipiscing ac quis arcu. Phasellus magna lectus, venenatis non tempor id, euismod ut quam.</p>
<p>Vivamus gravida dui ut dui facilisis ullamcorper. Nulla facilisi. Nunc eu sagittis ante. Fusce sit amet velit vel lacus congue sodales. Integer sollicitudin varius orci. Sed tellus erat, porttitor a ultricies nec, pellentesque nec felis. Sed at arcu ipsum. Etiam lorem leo, egestas et euismod nec, rhoncus dictum mauris. Fusce vestibulum lectus eget magna sollicitudin vulputate pulvinar augue tempus. Integer urna lacus, tincidunt eget fermentum eu, condimentum et eros. Ut vitae tortor porttitor dui elementum sollicitudin nec a ante.</p>
I'm open to ANY solution that enables the intended layout. Thanks--
Since your blocks have a fixed height, you can float a 0 width div with the same height as the div floated to the right.
<div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
<div style="float:left; display:block; background:transparent; width:0; height:100px;" > </div>
<div style="float:left; clear:both; display:block; background:#FF0000; width:200px; height:100px;" ></div>
It is not possible I'm afraid :(
see here for lots of test cases that specifically point out where IE7 fails, if there was a solution Bruno would link to it, I'm sure. btw that page leads to another with even more
in short :
clear: both (or the direction) will fail unless the previous float is is the same direction
I've had a look a round and the only solution for some cases is to add an extra element between the floats, but that won't work in your case as it will push the text below the bottom of the inserted element
I can't even think of a way to mimic it with script
EDIT:
I'm not sure if this is exactly what you want, but this looks "OK" in my IE browser:
<p><div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisi tellus. Ut ac iaculis erat. Integer nec turpis mi, quis placerat eros. Donec suscipit eros vel nulla vulputate cursus. Aenean ut augue nisi, a sagittis velit. Mauris eget velit at felis feugiat consequat. Sed interdum lobortis porttitor. Vestibulum ultrices posuere ipsum id posuere.</p>
<div style="float:left; clear:right; display:block; background:#FF0000; width:200px; height:100px;" ></div><p>Nam imperdiet, orci sed faucibus tempus, arcu est pretium mauris, in mollis tellus augue imperdiet elit. Maecenas mi nunc, rhoncus in feugiat et, varius at lacus. Etiam at iaculis libero. Phasellus eu ipsum tortor. Maecenas non purus dolor. Suspendisse risus felis, varius et porttitor eu, ultricies a orci. Nullam ac ipsum diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed convallis suscipit eros consequat sollicitudin. </p>
<p>Morbi facilisis aliquet rutrum. Vestibulum dignissim neque velit. Nunc auctor, ante nec placerat commodo, metus felis dignissim metus, sit amet aliquet sem nisi eget neque. Morbi diam massa, porttitor ac egestas at, bibendum id mauris. Phasellus at leo at est lobortis ullamcorper at vel dolor. Suspendisse tincidunt lobortis quam a luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris id metus id mauris rhoncus adipiscing ac quis arcu. Phasellus magna lectus, venenatis non tempor id, euismod ut quam.</p>
<p>Vivamus gravida dui ut dui facilisis ullamcorper. Nulla facilisi. Nunc eu sagittis ante. Fusce sit amet velit vel lacus congue sodales. Integer sollicitudin varius orci. Sed tellus erat, porttitor a ultricies nec, pellentesque nec felis. Sed at arcu ipsum. Etiam lorem leo, egestas et euismod nec, rhoncus dictum mauris. Fusce vestibulum lectus eget magna sollicitudin vulputate pulvinar augue tempus. Integer urna lacus, tincidunt eget fermentum eu, condimentum et eros. Ut vitae tortor porttitor dui elementum sollicitudin nec a ante.</p>
The problem is that the code above is not HTML valid, because you aren't allowed to put a block element inside an inline element. As mentioned above, it's probably not possible to do it on a HTML-valid-way.
Related
I'm trying to buld header that is white, but on place where logo is transparent i want header to be transparent to so you can see trough logo. Is there any way to make one part of header transparent but all others white? As you can see logo is inside the header its 50x50px and i want that part to be all transparent
header {
width: 100%;
height: 165px;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid black;
background-color: white;
}
.content {
width: 960px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul li {
display: inline;
list-style: none;
}
nav ul li a {
text-decoration: none;
}
<header>
<div class="content">
<img src="img/headerLogo.png" alt="NKO law firm company logo">
<nav class="main-navigation">
<ul>
<li>THE FIRM
</li>
<li>TEAM
</li>
<li>PRACTICE AREA
</li>
<li>RANKINGS
</li>
<li>CLIENTS
</li>
<li>CONTACTS
</li>
</ul>
</nav>
</div>
</header>
I came up with a bit of a "hacky" solution, using pseudo elements, that allows you to scale the size.
What's happening is that we're not setting a background colour directly on any of the elements. Instead, we are "faking" it by doing three things:
Adding border-bottom to the image, giving it a height equal to the
height of the header less the height of the image, and setting its
colour to white.
Adding a :before pseudo-element to the header, positioning it
top & left, with a background colour of white and a height equal to
that of the header. Using calc to set its width allows it to
scale to the left edge of the image and, effectively, hides it when
the window width is 960px or less as the result of the calculation
will be zero or a negative value.
Adding a :after pseudo-element to the header, positioning it top
& right, with a background colour of white and a height equal to
that of the header. The really "hacky" bit is setting the width
here. Using calc to subtract the widths of the :before element
and image works, provided the window width is greater than 960px -
less than that and the negative value of the :before width causes
the :after to encroach on the image. So we use 2 media queries to
set the width, the first as just explained for when the window width
is greater than 960px and the second for when the window width is
960px or less, which simply use calc to subtract the width of the
image from the overall width of the header.
body{
background:#ddd;
font-family:arial;
margin:0;
}
header{
border-bottom:1px solid #000;
height:165px;
width:100%;
left:0;
position:fixed;
top:0;
z-index:2;
}
header:before{
background:#fff;
content:"";
display:block;
left:0;
height:165px;
position:absolute;
top:0;
width:calc((100% - 960px) / 2);
z-index:1;
}
header:after{
background:#fff;
content:"";
display:block;
height:165px;
position:absolute;
right:0;
top:0;
z-index:1;
}
#media all and (min-width:961px){
header:after{
width:calc(100% - ((100% - 960px) / 2) - 50px);
}
}
#media all and (max-width:960px){
header:after{
left:50px;
}
}
.content{
width:960px;
margin:0 auto;
position:relative;
z-index:2;
}
img{
border-bottom:115px solid #fff;
height:50px;
width:50px;
}
nav{
float:right;
}
nav ul li{
display:inline;
list-style:none;
}
nav ul li a{
text-decoration:none;
}
main{
padding:176px 10px 10px;
}
main p{
margin:0 0 10px;
}
<header>
<div class="content">
<img src="img/headerLogo.png" alt="">
<nav class="main-navigation">
<ul>
<li>THE FIRM</li>
<li>TEAM</li>
<li>PRACTICE AREA</li>
<li>RANKINGS</li>
<li>CLIENTS</li>
<li>CONTACTS</li>
</ul>
</nav>
</div>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus condimentum nulla. Maecenas rutrum non mauris nec finibus. Sed dictum rhoncus turpis quis suscipit. Aliquam quam tortor, aliquam et tristique vitae, tempus in est. Donec non eros ac enim fringilla pulvinar. Praesent aliquam velit vel lectus tincidunt mattis. Maecenas id vulputate est. Ut consequat placerat enim vel lacinia. Aenean nec mattis metus, id tempus diam. Nunc viverra est et nunc tincidunt, at ullamcorper magna blandit. Maecenas egestas lectus nunc, ac cursus erat ullamcorper nec. Curabitur ut imperdiet libero.</p>
<p>Donec lorem nisi, ullamcorper in ex eu, consequat tristique lorem. Pellentesque feugiat ultrices vestibulum. Integer aliquet sodales suscipit. Integer posuere non orci id commodo. Phasellus elementum velit purus, nec efficitur diam semper ut. Vivamus at lobortis velit. Aenean egestas vestibulum ante, nec laoreet lorem vestibulum non. Donec a velit augue. Donec varius vehicula volutpat. Proin quam arcu, sodales lobortis risus sagittis, gravida consequat dui. Praesent nec quam eu ligula ullamcorper gravida. Mauris et quam volutpat, blandit orci sit amet, convallis nibh. Proin maximus neque suscipit ex egestas, et scelerisque nisi blandit. Suspendisse nunc dui, ullamcorper vel metus non, condimentum tristique nisi. Nulla nunc mauris, euismod non velit ac, consequat fringilla lectus.</p>
<p>Ut nulla purus, dictum ultrices accumsan ultricies, tincidunt vitae libero. Pellentesque auctor nisl fringilla justo fringilla condimentum. Maecenas nisi lacus, tincidunt id consequat eu, auctor sollicitudin ex. Nulla vel ante a lectus pellentesque ornare. Sed id pulvinar dolor. Integer eget dui nulla. Fusce in orci nec nisi ultrices ultricies a sed urna. Proin rutrum tristique erat, id facilisis mi. Donec nec est et odio convallis porta.</p>
<p>Sed ornare convallis nibh ultricies bibendum. Cras condimentum tristique ipsum, eu aliquam tortor porta et. Quisque auctor erat at felis feugiat pretium. Etiam finibus pharetra libero, vel suscipit odio. Mauris placerat mollis nibh sed varius. Sed at ipsum sem. Aliquam dictum pulvinar feugiat. Aenean vel suscipit libero. Nullam fringilla massa dapibus tellus tincidunt, in blandit turpis bibendum. Phasellus ac congue diam. Fusce consequat facilisis sagittis. Duis non suscipit mi.</p>
<p>Aliquam et sodales ligula, vel porta nulla. Fusce quis ante dictum, porttitor odio quis, dictum arcu. Maecenas maximus tincidunt euismod. Aliquam mauris est, posuere eu nisl hendrerit, elementum bibendum sem. Aenean in est augue. Nulla maximus neque non eros imperdiet, at malesuada tortor viverra. Curabitur dolor est, eleifend quis velit quis, placerat condimentum mi. Pellentesque tempus orci sit amet lacus lacinia, venenatis vestibulum magna euismod. Donec rutrum dignissim orci, nec dignissim sem faucibus nec. Nullam vel gravida nunc.</p>
<p>Aliquam justo velit, porta nec venenatis et, fringilla ac nisi. Praesent pharetra nulla ut nibh tristique, ac vulputate orci elementum. Mauris erat turpis, aliquet id fringilla in, iaculis in quam. Proin tortor arcu, viverra non fermentum at, pretium quis sem. Vivamus in ex molestie, tempor sem sed, feugiat dui. Aenean imperdiet augue et sem laoreet, sit amet porta tellus tristique. Aliquam et dapibus tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ullamcorper vel lacus nec vulputate.</p>
<p>Sed sapien massa, laoreet vitae aliquam et, tincidunt in augue. Maecenas justo tellus, ullamcorper ut pellentesque non, pulvinar non mauris. Etiam eu molestie erat, ac tincidunt lectus. Morbi scelerisque dui malesuada justo venenatis, id porttitor sapien rhoncus. Vivamus sit amet turpis sit amet nibh elementum mollis eget in velit. Suspendisse hendrerit, felis at laoreet pharetra, magna lorem elementum tellus, vel vehicula arcu tortor in purus. Phasellus vehicula dui id dolor pellentesque imperdiet. Nam venenatis augue sed justo lacinia, et consequat nibh facilisis. Quisque auctor erat id sem tincidunt ultricies. Proin fringilla nisl at lectus viverra, sit amet rhoncus felis lobortis.</p>
<p>Suspendisse tempus imperdiet leo eget sollicitudin. Suspendisse blandit ultricies volutpat. Sed volutpat ligula id velit auctor, et eleifend sapien dictum. Aliquam in vestibulum odio. Donec metus orci, suscipit bibendum ex sit amet, fermentum facilisis sem. Morbi rhoncus turpis viverra dui lobortis auctor. Vestibulum sit amet ante metus. Sed ut ex id felis sollicitudin feugiat. Praesent lobortis convallis arcu, elementum malesuada sem dignissim vitae. Vivamus id vulputate nisl. Sed pulvinar vehicula lorem, vel imperdiet elit.</p>
<p>Proin orci erat, rhoncus ac fermentum nec, euismod non nisi. Sed ornare sapien vel interdum blandit. Duis odio sem, pretium ut diam non, tempus vestibulum mauris. Maecenas vitae sapien tempus, varius tortor posuere, ullamcorper purus. Nulla pulvinar quam ut orci tincidunt, eu sagittis ex aliquet. Donec vestibulum auctor est ac suscipit. Mauris tristique lacinia euismod. Nulla ante elit, ornare et luctus vitae, vehicula at ex. Nulla vel tristique dui. Nulla ac sagittis lectus. Curabitur auctor semper felis, et tempus turpis euismod eget. Morbi tempus auctor ante, nec volutpat leo accumsan sed. Nullam ullamcorper odio at nunc ornare porta. Cras at lacus dapibus, convallis lectus ut, elementum tortor. Sed at mauris mi.</p>
<p>Cras egestas mi libero, vel pharetra libero congue eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pharetra, arcu quis tincidunt ullamcorper, arcu sem finibus justo, et luctus nunc justo in nunc. Fusce tempus fringilla diam a mattis. Ut nec est nisi. Fusce tristique nunc mauris, ut porttitor libero consectetur id. Donec libero orci, eleifend eget sagittis ut, venenatis ac justo.</p>
<p>Praesent auctor porta turpis at auctor. Quisque pulvinar nisi et dui convallis gravida. Aenean quis nulla neque. Pellentesque et erat at ipsum finibus ultricies. Curabitur eu euismod nulla, ac pretium augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat lacinia augue ac fermentum. Donec scelerisque finibus felis, vitae dignissim lorem ultrices in. Etiam convallis arcu sed libero convallis, non dictum dolor luctus. Etiam eget eros laoreet, ullamcorper justo quis, mattis nibh. Nullam mauris metus, aliquam at turpis vitae, luctus ullamcorper tortor. Nullam maximus posuere quam, id efficitur sapien.</p>
<p>Maecenas purus metus, egestas quis eleifend cursus, euismod nec quam. Suspendisse a volutpat ligula. Nulla dignissim lacus eget rutrum sollicitudin. Pellentesque commodo accumsan ultrices. Quisque porttitor orci laoreet, sollicitudin mauris vitae, sollicitudin velit. Nunc auctor volutpat efficitur. Sed tempor odio neque, ac vehicula dui tincidunt at. Nullam enim ex, fermentum non gravida faucibus, vulputate non augue. Praesent vulputate pharetra suscipit. Maecenas tempor venenatis leo ut ullamcorper. Cras cursus iaculis risus vel eleifend.</p>
<p>Nunc dictum lacinia leo eget venenatis. Sed aliquet scelerisque neque, a convallis nisl. Mauris tempus libero efficitur ornare molestie. Integer non finibus ex, vitae tempus massa. Donec quis sem erat. Maecenas consectetur, nibh ac porta feugiat, nisi mauris dictum quam, ac rhoncus nulla nibh in augue. Suspendisse tristique ligula ex, viverra fermentum nisi mattis a. Duis ullamcorper dapibus felis ornare maximus. Cras et hendrerit elit. Sed rutrum eleifend ante, ac interdum elit placerat ac. Duis a consequat lacus. Morbi congue orci eget est bibendum vehicula. Quisque nec erat nec sapien porta elementum vel eget libero. Donec condimentum tortor quam, eu porttitor erat lacinia non. Maecenas vitae laoreet massa. Aenean convallis erat a rhoncus fermentum.</p>
<p>Etiam augue enim, egestas vel auctor et, finibus nec mi. Cras vitae lectus vitae orci ullamcorper posuere. Aliquam enim massa, maximus eu nibh quis, rhoncus varius augue. Praesent quis libero diam. Cras ut sem tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non felis ac eros vehicula lobortis. Vestibulum malesuada leo sit amet bibendum sollicitudin. Ut euismod blandit purus at egestas. Nulla pellentesque risus vel libero vehicula efficitur. Nam id facilisis diam, vestibulum pulvinar metus. Nullam arcu eros, iaculis vitae lectus eu, porttitor facilisis massa.</p>
<p>Duis pellentesque tellus semper quam convallis, non condimentum odio auctor. Maecenas vitae blandit libero. Vivamus facilisis felis et est malesuada feugiat. Aenean quis augue ut mauris ultrices molestie. Aenean a velit elit. Sed sit amet viverra ex. Sed facilisis tempor placerat. In metus metus, venenatis sed nisi sit amet, posuere ultrices arcu. Integer laoreet fringilla est, quis interdum sem imperdiet ut. Sed sagittis fringilla orci non ornare. Donec viverra leo ut justo feugiat eleifend. Fusce dapibus vel ligula non convallis. Cras sed suscipit nisl, in varius diam. Vestibulum imperdiet blandit imperdiet. Proin accumsan augue quis turpis viverra pharetra.</p>
<p>Phasellus elementum nibh ac efficitur commodo. Donec vestibulum velit felis, eget mollis libero maximus ut. Proin semper purus nec libero volutpat, non feugiat nisl pellentesque. Nam fringilla lacinia dui, at feugiat odio vulputate id. Aenean condimentum congue justo eu interdum. Pellentesque at quam felis. Nulla ac elementum orci, in tristique ante.</p>
<p>Quisque in nisi consectetur, egestas urna id, iaculis ligula. Etiam varius lacinia velit, sit amet convallis sapien dignissim a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut blandit diam. Nunc vehicula, urna sed iaculis volutpat, nisl ipsum tempus tellus, in tincidunt nulla ipsum sed purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse non tortor at mi blandit varius id at tellus. Maecenas congue et orci ut pharetra.</p>
<p>Proin rutrum laoreet velit, a finibus lorem interdum non. Proin pharetra sagittis commodo. Duis in diam in nunc accumsan dictum vitae vel orci. In vulputate nunc dolor, nec venenatis orci ultrices at. Sed convallis ipsum pharetra tellus sagittis, a malesuada magna laoreet. Duis dapibus fermentum viverra. Maecenas varius magna sit amet lacus accumsan viverra. Nullam erat massa, vulputate ut urna et, aliquam mollis sem. Maecenas lorem diam, suscipit gravida arcu sit amet, porta vulputate tellus. Proin varius placerat ligula. Phasellus et lacus sapien. Donec feugiat ut neque id rutrum. Maecenas luctus turpis enim, in cursus ipsum egestas eu. Aenean ornare dui mauris, quis consequat orci hendrerit at. In erat purus, vulputate eget lectus id, gravida semper elit.</p>
<p>Vestibulum tincidunt pellentesque velit, vitae aliquam neque convallis a. Curabitur sit amet lectus sit amet mi pharetra interdum vitae non enim. Sed molestie euismod metus sit amet ullamcorper. Nam porta consectetur laoreet. Nunc varius ultrices vestibulum. Morbi dignissim leo libero, eget rhoncus leo semper a. Suspendisse eget varius diam. Curabitur facilisis finibus erat, sit amet placerat neque faucibus a. Aenean id nisi lacus. Nunc vehicula, justo id pretium gravida, dui dolor posuere augue, id egestas enim tortor quis dui. Donec dictum aliquet arcu, in egestas tellus ornare et. Morbi feugiat vehicula lectus quis maximus. Mauris dictum, sapien et fringilla convallis, dui urna tristique nisl, id fermentum purus dui sed est. Pellentesque faucibus pretium pharetra.</p>
<p>Maecenas quam neque, faucibus non dapibus non, porttitor et diam. Fusce quis eleifend purus. Duis condimentum vitae tortor vel iaculis. Nulla porta ultricies semper. Phasellus sit amet neque lacus. Suspendisse egestas massa at imperdiet maximus. Nam ante justo, condimentum in malesuada et, cursus eu purus.
</main>
ASIDE: Here is the Fiddle I was working on before you supplied your CSS.
Mabe somthing like this?
section {
background:#ddd;
height:1000px;
}
header {
width:100%;
height:60px;
}
.logo {
position:relative;
float:left;
width:100px;
height:60px;
background:red;
opacity:.3;
}
nav {
position:relative;
float:left;
width: calc( 100% - 100px ); /* 100% - logo-width */
height:60px;
background:#eee;
}
}
<section>
<header>
<div class="logo">Logo</div>
<nav>
<div>Rest of nav</div>
</nav>
</header>
</section>
I'm using bootstrap 3.2 and I'm trying to vertically align an image inside a div next to some text in the div next to it all using CSS. The image has the img-response CSS class so it's height can change as can the height of the text (because there are different lengths of text).
I've put together a quick sample http://www.bootply.com/MjLj4d5HET
I'm yet to find a solutions that works 100% of the time and I've had a good look around. I've tried
display: table-cell;
vertical-align: middle;
float:none;
but then it messes up the alignment of the divs which use push and pull CSS classes.
Any help would be much appreciated!
Unless you specify a height, divs, sections, figures, spans, and such take up the height of their content. So the div containing the image is the height of the image. You cannot put that in the vertical middle of the column next to it without both columns being equal in height. I would use jQuery. The css doesn't work properly in IE8.
DEMO: http://www.bootply.com/MjLj4d5HET#
Bootply has application errors nearly every day these days.
/* __________________ RESPONSIVE EQUAL HEIGHTS __________________*/
/*! jquery.matchHeight-min.js v0.5.1 | http://brm.io/jquery-match-height/ | License: MIT */
(function(a){a.fn.matchHeight=function(b){if("remove"===b){var f=this;this.css("height","");a.each(a.fn.matchHeight._groups,function(g,h){h.elements=h.elements.not(f)});return this}if(1>=this.length){return this}b="undefined"!==typeof b?b:!0;a.fn.matchHeight._groups.push({elements:this,byRow:b});a.fn.matchHeight._apply(this,b);return this};a.fn.matchHeight._apply=function(b,g){var h=a(b),f=[h];g&&(h.css({display:"block","padding-top":"0","padding-bottom":"0","border-top":"0","border-bottom":"0",height:"100px"}),f=c(h),h.css({display:"","padding-top":"","padding-bottom":"","border-top":"","border-bottom":"",height:""}));a.each(f,function(i,l){var k=a(l),j=0;k.each(function(){var m=a(this);m.css({display:"block",height:""});m.outerHeight(!1)>j&&(j=m.outerHeight(!1));m.css({display:""})});k.each(function(){var m=a(this),n=0;"border-box"!==m.css("box-sizing")&&(n+=e(m.css("border-top-width"))+e(m.css("border-bottom-width")),n+=e(m.css("padding-top"))+e(m.css("padding-bottom")));m.css("height",j-n)})});return this};a.fn.matchHeight._applyDataApi=function(){var b={};a("[data-match-height], [data-mh]").each(function(){var f=a(this),g=f.attr("data-match-height");b[g]=g in b?b[g].add(f):f});a.each(b,function(){this.matchHeight(!0)})};a.fn.matchHeight._groups=[];var d=-1;a.fn.matchHeight._update=function(b){if(b&&"resize"===b.type){b=a(window).width();if(b===d){return}d=b}a.each(a.fn.matchHeight._groups,function(){a.fn.matchHeight._apply(this.elements,this.byRow)})};a(a.fn.matchHeight._applyDataApi);a(window).bind("load resize orientationchange",a.fn.matchHeight._update);var c=function(b){var f=null,g=[];a(b).each(function(){var i=a(this),k=i.offset().top-e(i.css("margin-top")),j=0<g.length?g[g.length-1]:null;null===j?g.push(i):1>=Math.floor(Math.abs(f-k))?g[g.length-1]=j.add(i):g.push(i);f=k});return g},e=function(b){return parseFloat(b)||0}})(jQuery);
$(document).ready(function () {
/* ---------- equal height columns -------- */
$('.equal-height-col [class*="col-"]').matchHeight();
});
CSS
.v-align img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
HTML:
<div class="container">
<div class="row row-layout equal-height-col">
<div class="col-sm-2 row-icon v-align">
<img class="img-responsive" src="//placehold.it/200x55">
</div>
<div class="col-sm-10 row-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus sem nec purus vehicula mollis. In non erat aliquet, luctus massa ut, viverra tortor. Aliquam erat volutpat. Nullam nibh quam, pellentesque quis mattis at, ullamcorper sed justo. Nulla consequat tortor ut dictum pellentesque. Vivamus pretium accumsan dui nec egestas. Proin pellentesque a orci sit amet imperdiet. Vivamus a auctor sem. Proin a aliquet erat. Praesent cursus pharetra massa, fringilla molestie turpis viverra id. Curabitur quis purus id augue commodo pretium vitae sollicitudin mauris. Vestibulum mattis ullamcorper interdum. Morbi euismod congue commodo. Fusce nisl turpis, tincidunt et sagittis eget, tempor nec sapien. Nulla nec ipsum sem. Nam eget tristique dolor, nec maximus velit. Ut vitae odio nec ex dictum dictum varius nec dolor. Cras sodales interdum tortor, eu egestas mauris gravida nec. Aenean lacinia, augue sed dignissim ultrices, odio odio ornare eros, at auctor ipsum magna quis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam non fermentum enim, non venenatis sem. Vestibulum ultricies eu lorem at molestie. Cras faucibus egestas pharetra. Pellentesque eget lorem ac lectus pretium laoreet vel id lorem. Vestibulum dictum quis sapien eget aliquet. Donec at est condimentum, sodales leo nec, pharetra nulla. Quisque ac erat nisl. Sed fringilla urna eu eleifend hendrerit.
</div>
</div>
<br>
<br>
<div class="row row-layout equal-height-col">
<div class="col-sm-2 col-sm-push-10 row-icon v-align">
<img class="img-responsive" src="//placehold.it/200x55">
</div>
<div class="col-sm-10 col-sm-pull-2 row-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus sem nec purus vehicula mollis. In non erat aliquet, luctus massa ut, viverra tortor. Aliquam erat volutpat. Nullam nibh quam, pellentesque quis mattis at, ullamcorper sed justo. Nulla consequat tortor ut dictum pellentesque. Vivamus pretium accumsan dui nec egestas. Proin pellentesque a orci sit amet imperdiet. Vivamus a auctor sem. Proin a aliquet erat. Praesent cursus pharetra massa, fringilla molestie turpis viverra id. Curabitur quis purus id augue commodo pretium vitae sollicitudin mauris. Vestibulum mattis ullamcorper interdum. Morbi euismod congue commodo. Fusce nisl turpis, tincidunt et sagittis eget, tempor nec sapien. Nulla nec ipsum sem. Nam eget tristique dolor, nec maximus velit. Ut vitae odio nec ex dictum dictum varius nec dolor. Cras sodales interdum tortor, eu egestas mauris gravida nec. Aenean lacinia, augue sed dignissim ultrices, odio odio ornare eros, at auctor ipsum magna quis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam non fermentum enim, non venenatis sem. Vestibulum ultricies eu lorem at molestie. Cras faucibus egestas pharetra. Pellentesque eget lorem ac lectus pretium laoreet vel id lorem. Vestibulum dictum quis sapien eget aliquet. Donec at est condimentum, sodales leo nec, pharetra nulla. Quisque ac erat nisl. Sed fringilla urna eu eleifend hendrerit.
</div>
</div>
</div>
I have a section of a page layout which has the option of anywhere from 1 to 3 buttons in the right column, and the left column will have a title which may be a few words or even a paragraph.
The right column has the buttons and must take precedence and stay aligned to the right of the page width. The buttons must stay inline without wrapping. You can remove one or two buttons and it forces the text to the left, which is correct.
The left column needs to flow as close to the right column as it needs to in the case of wrapping text.
I've hit upon the idea of using CSS table display which works great in the case of long text, but for short text, the button column comes away from the right side.
Try removing all but 3 or 4 words of text and the buttons snap to the left. Am I taking the wrong approach here?
Here is the HTML, and here's a fiddle http://jsfiddle.net/MaureenDunlap/tvFbN/16/
<div id="wrapper">
<div id="container">
<div id="header_wrapper">
<div class="player_header_info">In vel purus ipsum. quam tempor auctor. Praesent ac leo magna, at condimentum felis. Nullam vel tortor semper metus bibendum iaculis. In consequat arcu aliquam nibh posuere non cursus eros dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla venenatis gravida mi eget vestibulum.
<div class="player_header_secondary">February 28, 2013</div>
</div>
<div id="buttons">
<div class="button_container">
<img src="http://www.likno.com/Images/lwbm/Single_Mesh_11.jpg" />
<img src="http://www.likno.com/Images/lwbm/Single_Mesh_11.jpg" />
<img src="http://www.likno.com/Images/lwbm/Single_Mesh_11.jpg" />
</div>
</div>
</div>
</div>
<div id="normal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet tortor at diam aliquet ornare eu nec leo. Phasellus ut blandit leo. Vivamus viverra velit eget quam tempor auctor. Praesent ac leo magna, at condimentum felis. Nullam vel tortor semper metus bibendum iaculis. In consequat arcu aliquam nibh posuere non cursus eros dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla venenatis gravida mi eget vestibulum. Phasellus elit ipsum, convallis a porttitor eu, blandit non justo. Pellentesque gravida, dui vel vulputate cursus, diam nisl eleifend massa, ullamcorper cursus nisl diam at erat. Nulla urna odio, vehicula et commodo sit amet, commodo at diam. Phasellus molestie tincidunt lacus, varius semper ligula tincidunt non. Nullam fermentum, enim ut dictum gravida, libero mauris pretium lacus, ac vehicula neque massa at mi.</p>
<p>Nam dignissim vehicula eros non viverra. Vestibulum non tellus sed ante placerat pharetra in vitae velit. Vestibulum eu lacinia urna. Nullam libero mauris, venenatis in condimentum auctor, porta tempor massa. In faucibus sapien sit amet tellus faucibus quis dictum eros pellentesque. Fusce id odio nec orci pellentesque bibendum. Curabitur viverra, nisl nec sodales elementum, lectus nisi vulputate leo, non cursus est libero eget odio. Curabitur a libero arcu. Etiam pellentesque mauris ut mi pellentesque euismod. Aenean sit amet consectetur diam. Curabitur nec velit leo. Sed feugiat lacinia sagittis.</p>
<p>Nam quis nulla quis lorem ornare semper nec eget orci. Proin justo lectus, suscipit rhoncus sollicitudin nec, dignissim eu mauris. Curabitur sit amet tortor in nisl vulputate placerat in nec lectus. Praesent euismod pellentesque augue, eu condimentum quam pellentesque et. Aliquam erat volutpat. Nam vitae leo et augue placerat lobortis et id magna. Curabitur sit amet ante id felis luctus iaculis. Quisque ac orci eu purus tempor consectetur vitae et dui. Mauris vehicula tincidunt ligula a cursus. Nunc imperdiet semper pulvinar. Phasellus iaculis laoreet quam, ac adipiscing mi pellentesque eu.</p>
<p>Nulla adipiscing fermentum leo, eget convallis nulla facilisis vel. Phasellus mollis ultrices risus vel volutpat. Nullam in enim mi. Duis eget ligula lectus, eget feugiat mauris. Duis at tortor enim, sit amet euismod turpis. Cras mattis tincidunt dolor nec feugiat. Mauris hendrerit lacus eu augue ultrices eu porttitor tellus semper. Ut mattis augue vitae velit tincidunt tristique.</p>
</div>
Here's my CSS:
#header_wrapper {
display: table;
border-collapse: collapse;
width:100%;
border:1px dotted #ccc;
}
.player_header_info {
display: table-cell;
vertical-align:top;
background-color: #e7dbcd;
padding-left:5px;
}
#buttons {
display: table-cell;
padding-left: 10px;
vertical-align:top;
}
.button_container {
position:relative;
display:inline;
white-space:nowrap;
}
if you are just wanting your buttons to stay on the right you can add text-align:right to #buttons
http://jsfiddle.net/tvFbN/20/
Otherwise you will need to add a min-width to .player_header_info
as you are using table-cells without giving them a width, they will always re-size to the content inside them without breaking the width of the top level table element
I have the following HTML:
<div style="float:left; background-color:#0CC;">Floating Left</div>
<div style="background-color:#03C; color:#FFF;">Not floating</div>
Which appears like this in the browser:
How can I make the "not floating" div appear beneath the floating one?
Just add clear: both; into your CSS for the non floating element:
<div style="background-color:#03C; color:#FFF; clear: both;">Not floating</div>
http://jsfiddle.net/Kyle_Sevenoaks/SnAc9/
You need to clear the float
clear:left
since the sense of float:left is to float left to the rest of the content until you clear the float.
If I misunderstood you and you want the second div to let it's content be covered by the floated div ("appear beneath the floating one") you need absolute positioning instead of floating the divs.
Also it is recommended to use separate css-rules instead of inline-styles.
Do you mean that you want the left div to be inset?
http://jsfiddle.net/2xhGC/2/
HTML
<div class="inset">Inset div that is wrapped by the other content.</div>
<div class="article"><!-- start slipsum code -->
<h1>I gotta go</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non justo ante, at auctor odio. Phasellus suscipit facilisis ligula eu dignissim. Praesent eget odio nisi. Sed in hendrerit massa. Aliquam laoreet fermentum sapien, vitae placerat velit pellentesque vel. Aliquam lectus nibh, porttitor non laoreet eget, varius ac enim. Vestibulum feugiat metus rhoncus libero rhoncus commodo. Phasellus id auctor nisi. Sed hendrerit eleifend egestas. Praesent et tristique nunc. Aliquam id velit tortor.</p>
<h1>Uuummmm, this is a tasty burger!</h1>
<p>Nullam tempus mauris id velit lobortis varius. Mauris tempor aliquet diam, eu egestas augue ultricies id. In cursus ullamcorper velit quis viverra. Maecenas non nisi erat. In hac habitasse platea dictumst. Ut ipsum turpis, consequat sit amet aliquet a, rutrum at erat. Vestibulum auctor, risus quis elementum accumsan, elit sem ultrices est, ut interdum sem erat id leo. Aliquam adipiscing ultricies justo, sed facilisis ipsum congue eget. Duis sem elit, faucibus non aliquam eu, pulvinar nec elit.</p>
<h1>Uuummmm, this is a tasty burger!</h1>
<p>Suspendisse venenatis iaculis est in malesuada. Nunc sit amet arcu eleifend felis bibendum rhoncus eget eu ante. Maecenas molestie, purus eget bibendum rhoncus, ipsum orci lobortis enim, sit amet congue nisl urna vitae arcu. Nullam eget ipsum sapien, ac accumsan augue. Suspendisse consequat aliquet commodo. Morbi vel arcu non risus tristique fermentum. Morbi viverra nisl nec dui iaculis pretium. Morbi id viverra erat. Donec molestie euismod ipsum, id commodo purus lacinia at. Ut auctor turpis sit amet erat ullamcorper eu gravida neque iaculis. Sed augue purus, aliquam sit amet faucibus quis, dapibus vitae odio. Nulla mollis faucibus pharetra. Phasellus eleifend sodales nisi id suscipit.</p>
<h1>I can do that</h1>
<p>Curabitur ac sem metus, in ornare lacus. Duis auctor hendrerit viverra. Morbi posuere fermentum laoreet. Suspendisse potenti. Phasellus auctor lacinia tristique. Mauris interdum turpis et libero fringilla a consectetur ligula malesuada. Suspendisse urna neque, sagittis nec suscipit eleifend, imperdiet in arcu. Cras sit amet arcu metus. Curabitur cursus, justo sed tempor volutpat, felis justo dapibus risus, non porta sapien lectus tempor arcu. Nunc vel enim lectus, et iaculis urna.</p>
<!-- please do not remove this line -->
<div style="display:none;">
lorem ipsum</div>
<!-- end slipsum code --></div>
CSS
.inset{
margin:1em;
padding:1em;
background-color:#ff0000;
float:left;
width:75px;
}
.article{
padding:1em;
background-color:#ccffcc;
}
.article p{
line-height:1.4em;
margin-bottom:.6em;
}
You should use clear: left which means the element will not accept floated elements to the left of itself and will therefore jump down beneath it.
You have to "clear: right" the first div...
I need the red box to expand with the blue box content, so they are always both the same size.
The red box is defined as:
.leftMenu{
float:left;
width:20%;
background-image:url(../images/leftMenuBG.jpg);
background-position:bottom;
background-color:#BFDAE3;
background-repeat:repeat-x;
}
Can't seem to get it to work, whatever I try! Any ideas? Thanks!
Simple solution: Use tables.
Semantic solution: Use faux columns.
You will need to wrap the red div around the blue div, so have the blue divs inside, floated right, and then have a clearing div after the blue divs.
<div style="border:solid red 2px;">
<div style="border:solid blue 2px;float:right;width:200px;">
<p>Content here</p>
</div>
<div style="clear:both;"></div>
</div>
Excuse the use of inline styles, these should be in a style sheet.
If you need each div to sit independently of each other and don't mind using JavaScript (as this is only a presentational layer) try this method.
You can use a jQuery plugin for that too. (for example, http://www.cssnewbie.com/equal-height-columns-with-jquery/)
But the Semantic solution: Use faux columns. from Magnar is nice too and doesn't require Javascript.
An additional 'faux column'-method is to (ab)use positioning.
Place both boxes inside a container that's floated (which makes it expand to accomodate floated children) and positioned relatively (which allows us to position child elements inside it).
Then, position the shortest column absolutely, and float the longest column. The container will take on the height of the floated child, and the div with position:absolute will take that height again.
A short example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Columns</title>
<style type="text/css">
html, body {
width: 100%;
}
#container {
width: 100%;
float: left;
position: relative;
border: 2px solid black;
}
#left-box {
position: absolute;
width: 40%;
border: 2px solid red;
background-color: #5555ee;
height: 100%;
}
#right-box {
float: right;
margin-right: 15%;
width: 40%;
border: 2px solid blue;
background-color: #3e3e3e;
}
</style>
</head>
<body>
<div id="container">
<div id="left-box">
- E - x - P - a - N - d - I - n - G -
</div>
<div id="right-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis eros ut sem sollicitudin ultricies. Vivamus pharetra, urna sit amet auctor mollis, risus sem ultrices quam, non condimentum enim leo sit amet tellus. Pellentesque id vehicula nisl. Nulla ut commodo ligula. Sed sit amet ligula purus, at suscipit leo. Nulla quis nulla id est aliquet vehicula. Suspendisse consectetur, nunc in hendrerit dignissim, nisl massa viverra quam, et faucibus augue lorem eu mi. Vestibulum commodo luctus ante, vel placerat metus ullamcorper vel. Sed id imperdiet orci. In hac habitasse platea dictumst. Praesent ac dui orci, vitae pharetra dolor.
</p>
<p>
Aenean enim metus, placerat at hendrerit in, hendrerit in velit. Cras tincidunt blandit sapien, a aliquet elit sollicitudin vitae. Quisque at ligula sem. In hac habitasse platea dictumst. Ut eu magna ipsum, id fringilla massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus consequat metus sed lectus dignissim posuere quis a felis. Mauris in consectetur arcu. Nullam fermentum adipiscing dignissim. Sed quis orci in magna viverra sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas condimentum lectus pretium tortor porta a hendrerit dui pharetra. Etiam est justo, bibendum vehicula vestibulum ac, mattis ut risus. Praesent dapibus nibh id enim vestibulum porta. Donec aliquam urna a diam varius blandit. Nulla interdum ante at arcu vehicula sagittis. Curabitur quam sapien, luctus ac sagittis vitae, tristique a odio. Nulla consequat gravida urna, at bibendum nisl ultricies ac.
</p>
<p>
Vivamus quis metus porta purus aliquet aliquet. Morbi sollicitudin orci ut ligula vehicula sollicitudin. Etiam sed lacus eget leo molestie ullamcorper sit amet ac urna. Cras vitae turpis in sapien dignissim molestie. Curabitur tellus purus, dignissim at adipiscing in, faucibus ac tortor. Duis vitae metus ac urna cursus consequat eget vel quam. Integer bibendum mauris enim, sit amet blandit sapien. Nam in lectus ante. Curabitur lacinia erat sit amet lectus malesuada facilisis. Phasellus et pellentesque enim. Fusce eget tristique est. Suspendisse id dui eu lorem congue tincidunt. Cras libero lectus, placerat eget tristique a, gravida vitae lorem. Sed nec venenatis sapien. Suspendisse tempus orci ut odio venenatis et cursus sem faucibus. Mauris commodo ultricies dictum. Curabitur iaculis, ligula sit amet lobortis hendrerit, eros orci elementum nisi, cursus lacinia nunc felis vitae erat. Donec id elementum ipsum.
</p>
<p>
Mauris id mi sed augue egestas vestibulum non a ipsum. Ut arcu purus, consequat in tincidunt in, pretium a dui. Cras in quam tellus, non ultricies nisi. Sed leo orci, gravida et luctus sed, eleifend quis odio. Praesent cursus feugiat neque, tincidunt malesuada libero egestas sit amet. Etiam nisi nisi, faucibus vitae accumsan sed, gravida ut lacus. Suspendisse hendrerit fringilla interdum. Cras fermentum nibh non eros gravida pretium et a sem. Sed non nisl dui, non commodo arcu. Donec nec massa mi, vel auctor odio. Curabitur sagittis velit id felis egestas iaculis. Nunc pharetra magna eu metus malesuada ut porta mi suscipit. Aenean vitae elit sit amet neque pellentesque malesuada. Aliquam eu nulla consectetur est adipiscing vulputate non a odio. Sed consectetur neque eros. Nulla fermentum vehicula vestibulum. Aenean eleifend, nisi eget porta accumsan, tellus orci tincidunt metus, volutpat lobortis quam augue commodo tellus. Aenean consectetur pretium vestibulum. Pellentesque a scelerisque sem. Cras pellentesque tortor euismod magna viverra mollis.
</p>
<p>
Mauris dignissim sodales placerat. Sed id interdum erat. Nunc sagittis, nunc in auctor ullamcorper, nisi dolor commodo sem, sit amet aliquam diam dolor posuere est. Ut vestibulum elit ut urna imperdiet non tincidunt sapien euismod. Fusce ut sem erat, aliquam accumsan metus. Proin sed velit nec velit laoreet dignissim at sit amet ante. Pellentesque ac dolor non nulla dapibus lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non nisl diam. Sed et ligula sed libero porttitor semper eget eu elit. Phasellus quis massa dolor. Phasellus ac justo ac diam ultrices iaculis quis at odio. Fusce eget nisi nunc. Cras cursus, dui eget mattis rutrum, arcu dolor sollicitudin nibh, eu congue augue quam ut leo. Praesent in est nulla, eu ullamcorper enim. Nullam in adipiscing ligula.
</p>
</div>
</div>
</body>