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>
Related
I'm building a react app with flexbox and I'm struggling getting all the pieces as I want them.
I want a fixed header at the top with a body that has its content centered and that can be scrolled (the scrollbar has to start in the body, not the header). This body can't go to the edges of the page so I'm using max-width to prevent this. The problem is that when I use the max-width, the scrollbar gets placed next to the body and it looks awful. I want it to stay at the far right of the page. Finally I want some space between the end of the body and the page (a bit of padding, if you will) so the content doesn't look like it's getting cut with the end of the site.
I've done this mockup in Photoshop
I mostly got the code working, minus the max-width and bottom padding. Here's what I got:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
}
main {
flex: 1;
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
...
</main>
</div>
I understand that this question has been asked in multiple ways a lot of times, but I've been looking for a while and I can't find the right one that fixes every thing I need.
Thank you for the help.
What you can do is add another element within the <main> tag. I use a <div> tag in my example, but it could be whatever you want. Keep the
overflow: auto;
on the <main> tag, so when the inner div overflows, you can scroll the <main> tag to move the <div>
Here's an example where I added some background color to show separation and some Lorem Ipsum text:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
text-align: center;
}
#stuff {
border-radius: 5px;
background: pink;
padding: 5px;
margin: 20px;
flex: 1;
}
main {
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
<div id="stuff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec magna porta, commodo magna ut, porta erat. Phasellus tristique leo vitae ante efficitur, sed fermentum mi auctor. In condimentum mi a urna cursus vestibulum. Nunc posuere metus turpis, faucibus viverra purus aliquam nec. Curabitur ultrices, sem nec aliquet congue, ligula justo sagittis arcu, quis blandit urna sem nec sem. Cras accumsan, turpis ac placerat porta, libero ex semper tellus, non mattis dui ligula id odio. Cras lobortis ex in ex consequat, eu viverra nibh luctus. Nulla facilisi. Nulla odio arcu, suscipit eu dui eget, cursus sodales ipsum. Nulla vestibulum nisl eget ante pellentesque, vel porttitor magna dapibus. Suspendisse at ligula nunc. Phasellus scelerisque urna sit amet scelerisque pharetra. Quisque risus metus, tincidunt vitae ultricies in, convallis tempus justo. Sed finibus laoreet dolor sit amet tincidunt. Sed efficitur volutpat aliquet.
Suspendisse condimentum euismod quam id tempor. Vestibulum rhoncus metus eu tortor rhoncus eleifend. Nam sagittis ex ex, eget varius ante semper a. Aenean vulputate eget ligula vel sodales. Vivamus vel nisi dignissim, eleifend sem non, bibendum dolor. Ut pulvinar malesuada nisi sit amet suscipit. Sed ultrices maximus tellus, nec congue felis.
Duis urna orci, consequat et lacinia lobortis, varius sed sem. Ut auctor congue augue quis interdum. Morbi erat justo, venenatis ac imperdiet sit amet, cursus eget tellus. Quisque accumsan nibh a dui vulputate tincidunt. Aenean accumsan diam lorem, ac rutrum magna ullamcorper et. Proin volutpat dolor tristique scelerisque tempus. Donec eu neque non purus pulvinar bibendum sed vitae justo. Suspendisse luctus dolor neque, eu convallis tortor condimentum ac. Aliquam sollicitudin ex ut sollicitudin sagittis. Aliquam imperdiet, diam vel hendrerit iaculis, neque ex accumsan neque, in hendrerit risus massa convallis ante. Cras urna velit, cursus sed dignissim vitae, porttitor faucibus est. Vestibulum ut dolor aliquam, malesuada velit ut, vestibulum nibh. Maecenas at convallis ex, a aliquam dui. Mauris at eros sit amet leo gravida pulvinar.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc faucibus laoreet ipsum, facilisis facilisis quam ultrices et. Vivamus interdum ut tortor sit amet sollicitudin. Cras rhoncus blandit lectus sed maximus. Integer ac dui nec metus dignissim lobortis vel vel erat. Cras in dignissim arcu. Nunc vulputate mi turpis, at dignissim turpis ullamcorper vitae. Cras neque justo, sagittis ut tempus vitae, pellentesque a mi.
Duis vehicula eros erat, vel tincidunt ante aliquet eget. Ut malesuada, est a sollicitudin tincidunt, magna ante varius est, vitae pulvinar arcu neque sit amet magna. Sed sit amet erat fermentum, bibendum ex sed, dictum lorem. Ut aliquam nibh vitae tellus convallis, sed condimentum augue suscipit. Nunc ac tellus sem. Maecenas vitae finibus lorem. Ut et fringilla lacus. Morbi neque lacus, rhoncus non odio et, sodales ultrices erat. Pellentesque molestie et felis sit amet pharetra. Curabitur id lacinia dolor. Curabitur non dignissim lorem, eleifend posuere lorem. Aliquam orci felis, vulputate vel felis molestie, vestibulum tempor tellus. Quisque mollis mauris blandit posuere tincidunt. Suspendisse condimentum est at enim interdum condimentum.
Aliquam a risus cursus, pretium dui nec, consectetur elit. Sed sollicitudin consectetur magna id accumsan. Quisque interdum tristique diam, at porta orci condimentum ut. Curabitur in metus purus. Donec diam orci, volutpat eu rhoncus in, accumsan sed neque. Nam egestas vestibulum vestibulum. Mauris fringilla, enim in finibus hendrerit, metus urna finibus lacus, in dictum eros eros vel orci. Aliquam blandit elit sem, vel fringilla libero commodo eu. Cras euismod a mauris non malesuada. Aliquam luctus malesuada nisl sed efficitur. Mauris suscipit convallis venenatis. Ut varius velit vitae scelerisque fermentum. Donec luctus convallis hendrerit. Sed vestibulum, diam at euismod lacinia, dolor eros commodo lacus, vitae pellentesque dui metus vel leo.
In hac habitasse platea dictumst. Nam massa lectus, fermentum non dolor eu, auctor luctus ex. Duis posuere sit amet lorem ut commodo. Pellentesque ultrices in tortor vel dignissim. Quisque lorem nibh, ullamcorper in sem nec, rhoncus posuere tortor. Aenean vitae feugiat nisi. Proin elementum sollicitudin iaculis. Morbi nec erat volutpat, posuere augue quis, porttitor erat. Aliquam dignissim blandit laoreet. Donec consectetur a risus et varius. Suspendisse quis vulputate tellus.
Nunc eget erat id lacus dictum viverra. Vivamus vel vehicula ipsum. Fusce convallis leo diam, sed consectetur nulla sagittis rutrum. Curabitur nec ligula convallis ex rutrum fermentum. Donec auctor, erat quis euismod maximus, sem massa fermentum tortor, non scelerisque nibh nisi at arcu. Vivamus sodales fermentum nisi quis tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst.
Nunc et lacus ac augue tincidunt pellentesque. Sed at odio at sem lobortis vestibulum. Sed cursus augue et sapien eleifend tempor. Etiam suscipit mi non est vehicula tincidunt a vitae libero. In blandit fringilla lectus non dignissim. In interdum, nisl non suscipit sagittis, sem erat sagittis ex, quis egestas lorem tellus nec metus. Suspendisse suscipit ultrices nunc eget vulputate. Donec mollis condimentum massa. Suspendisse potenti. Fusce eget urna ut dui fringilla faucibus et id justo.
Suspendisse posuere justo eget bibendum venenatis. Pellentesque sollicitudin nisi augue. Nunc sed justo ac mi ultrices elementum sit amet non lorem. Maecenas accumsan vehicula urna, sit amet posuere dolor malesuada at. Morbi vitae mi sed est suscipit euismod. Aliquam erat volutpat. Nulla elit purus, elementum at odio eget, tempor efficitur leo. Nunc dapibus erat nec faucibus rhoncus. Curabitur accumsan nibh sit amet sagittis placerat. Donec mollis metus eu metus eleifend ornare.
</div>
</main>
</div>
I am implement loading on scroll on a div it works perfect but elements from it can be removed by user as well. I want that div to be always scrollable but if user removes element from it scroll bar dissappers.
I have tried overflow-y: scroll and have added height as well. it works: there is a scroll bar always visible but the scroll bar has no thumb which means that i cannot scroll either by mouse wheel or using the arrow on scrollbar.
So it would be great if someone can help me in making the scrollbar thumb always visible.
here is the div that i am talking about :
<div id="external-events" class="mt-actions" style="height: 530px; width: auto; overflow-y: scroll;"></div>
Scroll
scrollbar without thumb
Please use overflow hidden until the mouse is over it, then make it auto.
Please note the 16px padding assumes a scrollbar is 16px wide, and is there so the text doesn't re-wrap when the scrollbar appears
Code snippet is below
div.myautoscroll {
height: 40em;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
<div class="myautoscroll">
<p>
This is a test for the stackoverflow question by Mathan
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tincidunt
odio sit amet eleifend. Nullam mattis posuere est, ut hendrerit ipsum ultrices
non. Aliquam erat volutpat. Aliquam hendrerit, odio at euismod fermentum, arcu
nunc sagittis enim, eget malesuada nulla risus rhoncus massa. In in varius
metus. Mauris consequat leo a sem pretium sodales. Cras facilisis porttitor
ultrices. Sed ipsum metus, luctus sit amet blandit at, facilisis vel mauris.
Morbi leo turpis, congue dignissim imperdiet eu, laoreet mattis turpis.
</p>
<p>
Etiam eu velit magna, et euismod ligula. Aenean non ligula at tortor accumsan
blandit eget ut lacus. Vivamus commodo nunc egestas dolor sagittis rutrum
egestas metus sagittis. Pellentesque mollis eros ut nisl auctor tincidunt. Cras
ullamcorper ultricies arcu, id tincidunt ligula cursus eget. Ut accumsan, dolor
et ultricies consequat, urna lacus blandit massa, nec vestibulum sapien sapien
sed sem. Nunc mattis lorem ornare mauris viverra vel mattis mi euismod. Vivamus
quis neque massa. Integer at est diam, vel molestie libero. Donec non ipsum non
mauris posuere auctor. Quisque ac sapien sit amet diam elementum sagittis quis
et urna. Maecenas adipiscing orci sed dui eleifend bibendum.
</p>
<p>
Suspendisse massa tortor, sagittis dignissim sodales vitae, porta id lorem.
Aliquam at enim non libero consequat blandit. Nunc eleifend fermentum diam
vitae condimentum. Aliquam molestie magna ut purus malesuada a rhoncus orci
aliquet. Sed lacus ante, fringilla ut accumsan non, fermentum eu nibh.
Phasellus quis nisi sem, at hendrerit eros. Proin faucibus sollicitudin
tristique. Donec et velit magna. Sed eu dolor eu dui fermentum aliquet. Etiam
sollicitudin egestas dui iaculis tempor. Aliquam quis mauris in augue luctus
condimentum ut quis turpis. Donec porttitor, sapien non interdum dignissim,
arcu nunc ullamcorper nisi, at sagittis enim nisi fringilla risus. Nulla vel
ipsum nulla. Aliquam fringilla quam dapibus sapien mattis at ornare massa
fringilla. Nullam sit amet lorem quis ipsum euismod imperdiet.
</p>
<p>
In hac habitasse platea dictumst. Fusce vitae urna id ipsum ornare molestie.
Sed non urna in lectus tempor dictum non quis metus. Phasellus at dolor eget
justo dapibus congue posuere nec dolor. Nunc hendrerit bibendum tincidunt.
Vestibulum scelerisque enim nulla, venenatis sollicitudin dui. Donec feugiat
condimentum velit, at ultrices felis sagittis elementum. Sed a massa massa,
quis scelerisque sapien. Etiam non est felis, quis imperdiet diam. Aenean felis
sapien, egestas blandit egestas non, imperdiet convallis risus. Nunc lacinia
aliquet adipiscing.
</p>
<p>
Integer eu eleifend nulla. Duis elementum malesuada lectus at pretium. Praesent
euismod nibh sit amet dui interdum nec interdum elit pretium. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis
molestie est eu nisi rutrum blandit. Nulla non luctus purus. Fusce fringilla,
dolor vel ultrices sagittis, quam purus aliquet urna, ac porta lectus velit ut
mauris. Maecenas lectus magna, imperdiet sit amet iaculis a, vestibulum nec
est. Sed tellus nibh, suscipit ut elementum vitae, venenatis placerat nibh.
Pellentesque mattis convallis iaculis. Fusce mauris ipsum, ullamcorper id
porttitor eu, luctus tincidunt lectus. Nulla facilisi. Aliquam erat mi, laoreet
nec condimentum sed, pulvinar a massa. Integer eget orci lacus, ut dapibus
arcu. Vivamus sollicitudin libero vitae libero ullamcorper interdum. Vivamus
egestas dignissim eleifend.
</p>
</div>
I have a basic layout with a block of text above and below and image like this..
.image_holder img {position:absolute;top:0;left:0;}
.image_holder{position:relative;}
<div class="test1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus mauris, pharetra a ligula ut, aliquam accumsan sem. Etiam semper, mauris vel congue laoreet, tellus quam ultrices mi, vel fringilla magna tortor eu massa. Phasellus aliquet semper lacus. Nullam vehicula purus non nunc facilisis tincidunt posuere ut lacus. In viverra viverra bibendum. Sed placerat mollis scelerisque. Sed ultricies diam ut velit ornare molestie. Nam commodo elit lorem, vel fringilla dui venenatis non. Duis condimentum nisl ut risus egestas malesuada. In at accumsan ex. Curabitur quis magna sodales, laoreet dui nec, ullamcorper libero. Integer rhoncus, magna non rutrum scelerisque, leo odio ornare sapien, a ullamcorper nunc urna a risus. Duis sit amet diam sollicitudin, condimentum enim nec, ullamcorper erat.
</div>
<div class="image_holder" style="position:relative;">
<img id="image1" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="test2">
Quisque pulvinar sapien ipsum, a dapibus nulla auctor venenatis. Etiam pretium nec mauris eu dictum. Maecenas et sollicitudin orci. Etiam mattis tincidunt lacus, malesuada imperdiet quam consequat non. Aliquam ex lorem, pulvinar ac egestas nec, rutrum et elit. Duis vitae semper mauris. Curabitur sem sapien, accumsan quis risus a, dictum feugiat tellus. Donec vitae pulvinar orci. Duis dapibus odio ut luctus congue. Praesent egestas orci eget tortor aliquam fermentum. Donec mollis et tellus eget ullamcorper.
</div>
Why does the div below overlap the image? As the images are absolutley positioned inside a relativley positioned div then it wouldn't break layout?
You should define height and / or width for the relative position because once you give an element absolute its getting out of the flow so you have to set the height and width 100% to the absolute then and its looking for a parent that have a height and width to behave in the right way
.image_holder img {
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
.image_holder {
position:relative;
width: 300px;
height: 300px
}
<div class="test1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus mauris, pharetra a ligula ut, aliquam accumsan sem. Etiam semper, mauris vel congue laoreet, tellus quam ultrices mi, vel fringilla magna tortor eu massa. Phasellus aliquet semper lacus. Nullam vehicula purus non nunc facilisis tincidunt posuere ut lacus. In viverra viverra bibendum. Sed placerat mollis scelerisque. Sed ultricies diam ut velit ornare molestie. Nam commodo elit lorem, vel fringilla dui venenatis non. Duis condimentum nisl ut risus egestas malesuada. In at accumsan ex. Curabitur quis magna sodales, laoreet dui nec, ullamcorper libero. Integer rhoncus, magna non rutrum scelerisque, leo odio ornare sapien, a ullamcorper nunc urna a risus. Duis sit amet diam sollicitudin, condimentum enim nec, ullamcorper erat.
</div>
<div class="image_holder" style="position:relative; height: 300px; width: 300px">
<img id="image1" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="test2">
Quisque pulvinar sapien ipsum, a dapibus nulla auctor venenatis. Etiam pretium nec mauris eu dictum. Maecenas et sollicitudin orci. Etiam mattis tincidunt lacus, malesuada imperdiet quam consequat non. Aliquam ex lorem, pulvinar ac egestas nec, rutrum et elit. Duis vitae semper mauris. Curabitur sem sapien, accumsan quis risus a, dictum feugiat tellus. Donec vitae pulvinar orci. Duis dapibus odio ut luctus congue. Praesent egestas orci eget tortor aliquam fermentum. Donec mollis et tellus eget ullamcorper.
</div>
You need to set a height on "image_holder" since it gets a height of 0px. You can easily see this in Developer Tools in your browser. An element gets its height from its content and since the content of image_holder (the image that is) is positioned absolute it will not add the the height of the parent. You need to set the height manually in this case, but for a simple layout as this you should probably not use position: absolute.
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 was wondering if any of you knew if it was possible to make anything looking like this :
I know about http://www.infimum.dk/HTML/slantinfo.html but I can't put any text in the slanted areas.
Did it with a bit of javascript: http://jsfiddle.net/billymoon/AvmE8/
But that is just for convenience, you can do the same with HTML.
Will not apply to all circumstances, and will need a little tweaking, but can be made to work for things you know the approximate length of - or know the upper bound of.
html:
<div id='left'>whatever text</div><div id='right'>random text</div>
css:
#left, #right{
text-align: justify;
position: absolute;
width:60%;
right:0;
}
#right{
right:auto;
left:0;
}
js:
for (i = 1; i < 40; i++) {
$('<div />').css({
border: '1px solid silver',
height: 10,
width: (5 * i),
float: 'left',
clear: 'left'
}).prependTo($('#left'))
$('<div />').css({
border: '1px solid gold',
height: 10,
width: (200 - (5 * i)),
float: 'right',
clear: 'right'
}).prependTo($('#right'))
}
Here is an example of the desired layout using the CSS shape-outside property even though it has the status of "candidate recommendation" and should not be used as it may change at any moment and has poor browser support :
DEMO (only modern webkit browsers)
Note : this layout would be much easier to make by combining shape-outside and shape-inside (i.e. no absolute positioning) but currently no browsers I know of support shape-inside.
p{
width:550px;
text-align:justify;
overflow:hidden;
}
#right{
position:absolute;
top:0; left:355px;
}
p:before{
content:'';
width:40%;
height:710px;
}
#left:before{
float:right;
shape-outside: polygon(100% 0, 100% 100%, 20% 100%);
}
#right:before{
float:left;
shape-outside: polygon(0 0, 100% 0, 20% 100%);
}
<p id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida.Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus.Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus.Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida.Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus.Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus.Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
This property can also (combined with the clip-path) alow you to slant text next to a cliped image:
DEMO (modern webkit browsers only)
References:
browser support chart
MDN shape-outside
more to read and learn about CSS shapes and ways to clip content around and inside non rectangular shapes: Non-Rectangular Layouts With CSS, html5rocks, alistapart
Thinking out loud here, but what if you have 2 side by side vertical divs. In the left div use Eric Meyer's Slantastic technique on the right side. In the right div use it on the left side.