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.
Related
I was wondering if there is a way to make a div with position fixed immobile, so if the user scrolls the div will be immobile to the initial position. I need it because I have a toast spawning inside another div, and I need this toast in foreground otherwise it will spawn inside the div (with scrollbar and partially visible).
That's an example image to explain better:
With position absolute:
With position fixed (the desired effect):
That's my component code (it's a child component):
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute; z-index:999; left:80%; width:300px;opacity:1;cursor:unset !important" *ngIf="!isCollapsed && onlyOnePopup == dataItem.Id">
<div class="toast-header" style="background-color: #00549F;">
<strong class="mr-auto" style="color:#fff;"></strong>
<button (click)="onlyOnePopup = null && isCollapsed = true" type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true" class="close" style="color:white;">×</span>
</button>
</div>
<div class="toast-body" style="font-family:Font; white-space:pre-line; color:black; cursor:unset">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
</div>
Use position: fixed, and then set the exact position that you want. Here's a snippet showing you an example of how to do it.
body {
height: 2000px;
background-color: aqua;
}
.fixed-div {
width: 200px;
heigth: 200px;
background-color: white;
padding: 50px;
position: fixed;
top: 0px;
right: 0px;
margin-right: 20px;
margin-top: 20px;
}
<html>
<head></head>
<body>
<div class="fixed-div">
Fixed Div
</div>
</body>
</html>
Instead of left: 80% try bottom: 0; right: 0 along with position: fixed; and then set right-margin accordingly.
the main thing is to set the height of html as 100vh (veriable height) and width to 100vw(veriable width). this will set your page to 100% of the space available in the browser window regardless of size. then set the toast div to fixed with the right and bottom set where you like (0 for bottom and right puts it in the lower right corner completly)
you cannot set a fixed point with no reference to what it should be fixed to. so by setting the html page size explicitly, the fixed position can be set based off that.
html {
height: 100vh;
width: 100vw;
}
.toast {
position: fixed;
right: 1rem;
bottom: 1rem;
background-color: rgb(0, 255, 255, 0.8);
padding: 1rem;
height: 2.5rem;
width: 15rem;
}
.display-content {
max-height: 100vh;
overflow-y scroll;
}
<div class="display-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur felis neque, et viverra tellus fermentum eget. Quisque nunc tellus, pulvinar id felis sed, sodales iaculis magna. Morbi sodales pellentesque sapien, nec dignissim augue. Integer odio enim, posuere et convallis et, ultricies in odio. Curabitur felis libero, iaculis et elit in, feugiat tempor augue. Duis finibus mattis leo eu facilisis. In faucibus tincidunt dui. Nullam pulvinar est vel mauris rhoncus euismod. Praesent vel pharetra neque, vitae sollicitudin enim. Nunc placerat sagittis malesuada. Suspendisse potenti. In tempus risus eget dapibus semper. Vestibulum vitae elit congue, tempor quam at, ultricies mauris.
</p>
<p>
Suspendisse ut ullamcorper libero. Quisque consectetur gravida nisi, non faucibus turpis iaculis nec. Phasellus vulputate, tellus sed dapibus dapibus, turpis mauris facilisis eros, eu sagittis quam ante eget felis. In nec nisl at lorem tincidunt vulputate vel eu est. Phasellus ipsum velit, placerat quis pulvinar non, auctor at ex. Nam pharetra dolor a semper feugiat. In sed commodo mauris. Aenean in turpis sed orci molestie efficitur quis id orci. Duis laoreet leo a nulla interdum hendrerit. Suspendisse molestie tristique semper. Vestibulum convallis purus et orci mollis sodales. Praesent ut lectus laoreet, suscipit velit nec, pharetra neque.
</p>
<p>
Morbi placerat metus a eros viverra, luctus ultricies eros fringilla. Nunc mollis lorem at lacus lobortis, vitae blandit ex condimentum. Maecenas et ultricies tortor, sit amet ornare risus. Nunc id nisl et ligula commodo vehicula in et risus. Pellentesque molestie et risus quis lacinia. Quisque quis risus laoreet, venenatis enim nec, hendrerit nisl. Nulla facilisi. Pellentesque pretium turpis vestibulum urna auctor sodales. Vivamus mattis sem eu tellus scelerisque tempus. Sed venenatis felis in mollis suscipit. Sed quis felis ac erat facilisis pellentesque eget nec purus. Phasellus libero odio, semper sed auctor at, ultrices non nibh. Proin consectetur metus sed ultrices aliquam. Pellentesque placerat, nibh vitae semper sodales, mauris elit vestibulum mauris, sit amet condimentum odio est tincidunt neque. Quisque metus lacus, ullamcorper non accumsan nec, placerat et lectus.
</p>
<p>
Vestibulum nec sem ex. Pellentesque volutpat quam eget justo rhoncus congue. Etiam in lorem pellentesque, pulvinar turpis non, dignissim nibh. Etiam eget urna congue, sodales nulla eget, fringilla lorem. Aliquam suscipit dapibus augue eget mollis. Phasellus feugiat sagittis massa, in posuere odio ultrices eu. Aliquam erat volutpat. Morbi eleifend augue vel sagittis pellentesque. Cras auctor interdum purus non fermentum. Aliquam erat volutpat. Integer elit mi, molestie vitae pulvinar vel, elementum et dui. Pellentesque leo risus, elementum eu accumsan nec, pharetra non massa. Phasellus pulvinar mollis aliquam.
</p>
<p>
Sed elementum facilisis erat, in molestie tortor varius ut. Vestibulum dapibus dolor quis mi malesuada, id venenatis ante vulputate. Aliquam fermentum viverra ante, sit amet rhoncus turpis laoreet vel. Vestibulum a vestibulum dolor. Mauris ut efficitur nunc. Donec sit amet consectetur orci. Ut at erat non sem mattis dictum. Aliquam vestibulum nulla nunc, nec varius est vestibulum sit amet.
</p>
<p>
Aenean imperdiet eros non eleifend molestie. Nullam venenatis nibh non pellentesque imperdiet. Quisque volutpat eros non odio convallis ultricies. Etiam convallis facilisis libero, a commodo tellus condimentum quis. Curabitur congue erat ut tincidunt eleifend. Donec tincidunt ullamcorper consequat. Etiam iaculis elementum fermentum.
</p>
<p>
Fusce vehicula libero nisl. Aliquam tempor sem at lacinia facilisis. Donec vestibulum sit amet augue non rhoncus. Nulla sagittis leo elit, a interdum metus dapibus in. Nulla in mattis nunc. Sed sit amet est in tellus vehicula molestie vel tempor nisl. Donec dignissim est lectus, ac pharetra neque bibendum nec.
</p>
<p>
Sed porta dui eget turpis scelerisque rutrum. Aliquam eu diam nec nunc ultrices hendrerit. Quisque convallis metus vitae tellus fermentum finibus. Cras id ullamcorper nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed gravida lorem non blandit porta. Aliquam ac dui laoreet, interdum dui vel, pellentesque arcu. Aenean gravida nunc sit amet arcu rhoncus mollis. Nullam sit amet risus at urna dictum pharetra. Nunc maximus condimentum dui, sed hendrerit metus pretium et. Curabitur eu sollicitudin lorem, et luctus magna. Donec tincidunt id purus sed placerat. Proin vel tristique velit. Donec ornare nisi at laoreet luctus. Integer id metus molestie, fermentum massa non, porta diam.
</p>
<p>
Quisque at volutpat augue. Maecenas porttitor ornare scelerisque. Ut pretium sapien a placerat dapibus. Fusce vel urna eu sem blandit euismod. In imperdiet eros sit amet quam tempor aliquam. Morbi volutpat tincidunt massa, non convallis dui pharetra nec. Ut velit odio, pellentesque mollis sodales et, eleifend ac libero. Curabitur orci ante, varius ac congue id, rutrum id leo. Pellentesque massa massa, lacinia pretium sapien ut, dignissim congue ipsum. Aliquam commodo leo in nisl pharetra, sed viverra est auctor.
</p>
</div>
<div class="toast">This is a toast</div>
I am creating a website in which the minimum height of the page is 200vh. I have a full page image, followed by text content below that. I want to prevent the text from overflowing out of the container. Here is an example:
* {
margin: 0;
padding: 0;
}
.container {
position: absolute;
width: 100%;
min-height: 200vh;
background: red;
}
.full-page-image {
background-image: url("https://i.ytimg.com/vi/xC5n8f0fTeE/maxresdefault.jpg");
background-size: cover;
position: absolute;
height: 100vh;
width: 100%;
}
.content {
position: relative;
top: 100vh;
left: 10vw;
width: 80vw;
}
.content p {
font-size: 1.4em;
}
<div class="container">
<div class="full-page-image">
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum leo at hendrerit pulvinar. Integer non lacus dapibus, dictum ipsum sed, gravida erat. Quisque fermentum fermentum arcu, ac sollicitudin est. Mauris nec pulvinar mi, eu eleifend nisi. Cras lorem ligula, condimentum eget dictum quis, dapibus et est. Quisque tincidunt libero sit amet odio tincidunt, quis bibendum neque malesuada. Proin elementum nulla diam, ac porta est sodales at. Cras ac tortor in odio scelerisque scelerisque. Vestibulum eu ligula semper, lacinia purus ac, auctor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum aliquam nisi ligula, scelerisque imperdiet ante consequat ut. Proin est dolor, egestas a sapien vitae, ultricies euismod ex. Nam eget euismod ante. Praesent finibus sed nisi tincidunt pretium. Vestibulum porta laoreet sapien, et congue odio posuere eu. Proin nec lectus vel libero vestibulum tincidunt. In dapibus a nisl eu imperdiet. Donec faucibus odio a metus sagittis, et vulputate dui dapibus. Etiam non ex libero. Duis ultricies dignissim nulla, in mollis sem condimentum vitae. Etiam tincidunt sed dolor vitae venenatis. Maecenas volutpat felis eu vehicula pharetra. Donec a turpis lacus. Aenean tortor justo, iaculis ut erat eu, rhoncus sagittis elit. Nullam non sapien purus. In at consectetur augue, sit amet mollis justo.
Suspendisse feugiat quam vitae massa tempor luctus. Duis aliquam commodo dolor et commodo. Aenean sit amet nisl vitae quam tincidunt molestie id ac enim. Fusce eu ante imperdiet, viverra lacus at, efficitur risus. Vestibulum placerat, libero quis luctus faucibus, diam nisl tempor justo, eu tempus mauris ligula in libero. Pellentesque ut odio quis orci interdum gravida vitae ut neque. In hac habitasse platea dictumst. Ut finibus mi vitae enim euismod auctor. Integer libero dui, laoreet vel euismod vitae, eleifend mattis urna. Praesent convallis sodales elit, vel elementum purus dapibus nec. Curabitur euismod ullamcorper dolor, a egestas nibh porttitor rhoncus. Nam elementum bibendum elementum.
Fusce non nibh quis odio tempor lobortis ut et lorem. Quisque volutpat dapibus mauris, vitae varius ipsum sollicitudin malesuada. Etiam ultricies sapien tortor, et vehicula ipsum volutpat sollicitudin. Nulla id nisl nunc. Sed sit amet iaculis lacus. Nulla egestas ex purus, eget elementum nibh molestie et. Vivamus sodales rhoncus varius. Donec malesuada, quam et pharetra aliquet, odio erat gravida nunc, nec vehicula tellus diam in purus. Curabitur feugiat tempor nulla, euismod ornare lorem consequat at. Nam rutrum arcu porta nulla convallis viverra. Mauris pharetra velit arcu, ac placerat quam ornare ut. Morbi vitae diam quis turpis fringilla ornare at in urna. Nulla elit lectus, molestie sit amet risus nec, pretium vehicula diam. Morbi velit massa, accumsan eget iaculis eget, pharetra at ex. Duis purus eros, iaculis nec enim at, dignissim pellentesque purus. Nulla convallis, erat quis elementum posuere, metus libero malesuada erat, eu pharetra mauris libero id lacus.
Curabitur placerat accumsan hendrerit. Proin vel mauris eget justo fringilla volutpat eget a libero. Nullam iaculis varius fringilla. Morbi in urna mi. Pellentesque sit amet lacinia odio. Nunc vel dolor aliquet, vulputate magna non, consequat purus. Mauris non malesuada est, nec congue ante. Sed sit amet vestibulum nunc, id hendrerit urna. Ut porta eget risus a tincidunt. Aliquam ut dui elit. Nulla quis varius sapien, vulputate auctor mi. Phasellus rhoncus vestibulum purus, vestibulum porttitor libero mattis in. Aenean elit velit, ultrices in lacinia et, lobortis id tortor. Quisque dapibus cursus lorem, et consequat tellus pretium eu. Maecenas vitae magna bibendum mi placerat pellentesque.
</p>
</div>
</div>
How can I prevent the text from going outside of the red background?
You can prevent text overflowing a container by either 1. expanding the container to fit the text, or 2. hiding the overflowing text beyond the container.
1:
a. In your case, usage of top: 100vh will not change the height of the element, but will push the entire element downwards 100vh. Therefore it will overflow the parent/container element (the red background) by 100vh. The text inside this element will reach to the bottom, also overflowing by 100vh. Use margin-top: 100vh instead, to let the element start 100vh from the top, but end within it's parent element.
2:
a. Ensure the container is the desired height. Use dev tools to view/highlight the height of an element.
b. Set overflow: scroll; or overflow: hidden; see css overflow This will hide the text beyond the container height, with either scrollbars or not. Note: overflow: auto will (should) not show scrollbars if there is no overflow.
Pretty sure this what you are looking for:
.container {
position: absolute;
width: 100%;
min-height: 200vh;
overflow-y: auto;
background: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
I am designing a page for a blog. The page has a fixed position sidebar, and a centered div for content. You can see it here. Here's my CSS:
.container {
width: 100%;
height: 100%;
text-align: center;
}
.sidebar {
position: fixed;
left: 0px;
top: 10%;
height: 80vh;
width: 10%;
background-color: red;
}
.content {
width: 40%;
display: inline-block;
text-align: justify;
}
<body>
<div class="container">
<div class="sidebar">
THis is the sidebar.
</div>
<div class="content">
<h1>Fourth</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien vel augue auctor tempor. Duis orci velit, congue at ornare non, tincidunt quis sapien. Nam at fringilla tortor. Fusce non pharetra quam. Vestibulum fermentum facilisis urna
sed consequat. Nam rutrum sapien at facilisis porttitor. Fusce vehicula dignissim nisl, vel cursus lorem mattis ut. Sed eros libero, euismod et ligula sed, rutrum varius libero. Nulla eget sem sit amet velit pretium porttitor. Morbi tempus ultrices
urna, in egestas erat cursus ut. In hac habitasse platea dictumst.</p>
<p>Donec efficitur gravida pellentesque. Curabitur dignissim odio at tempus fermentum. Aenean pharetra sed sem sed convallis. Praesent pretium urna sit amet leo porttitor, eu auctor purus consequat. Donec id velit eleifend, fringilla enim vitae, blandit
lacus. Nulla tincidunt sed lacus ac euismod. Nam non blandit diam.</p>
<p>Vivamus hendrerit ex a orci dapibus convallis. Vivamus dictum maximus purus, in condimentum massa molestie ut. Donec aliquet, augue ut consequat consectetur, velit turpis finibus elit, sed porta dui felis sed massa. Nulla aliquam interdum est eget
ornare. Suspendisse cursus nec lorem eu rhoncus. Curabitur vehicula pellentesque egestas. Proin et commodo purus. Nulla malesuada consequat tortor, interdum volutpat est congue sed. Curabitur vitae placerat lacus, vestibulum lacinia mi. Duis auctor
malesuada lacus id consectetur. Etiam venenatis nisi eget tellus accumsan, vel ornare mi porttitor. Curabitur dictum non tortor et laoreet.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent egestas quam orci, et eleifend lectus lobortis vel. Nullam pulvinar porttitor egestas. Phasellus consectetur felis eget erat iaculis pulvinar
in sit amet sapien. Nulla sollicitudin maximus nulla, nec ullamcorper arcu tempor at. Aliquam at nisl massa. Sed eleifend urna sit amet erat semper, ac aliquam quam imperdiet. Ut nec cursus nisl. Quisque feugiat imperdiet tellus sed aliquam. Nulla
magna velit, interdum nec auctor vitae, congue at augue. Phasellus placerat risus et vehicula efficitur. Etiam hendrerit egestas interdum. Nulla placerat fringilla mi et rhoncus. Fusce porttitor, arcu consectetur finibus porta, mi ante ultrices
tellus, nec vulputate diam leo quis tellus. Fusce aliquam nulla vel sem tempus, non elementum est condimentum. Nunc accumsan libero diam, ut varius nibh dapibus luctus.</p>
<p>Integer vitae tempor velit. Sed convallis sed dolor id pulvinar. Donec nisi nisl, accumsan quis ante in, tempor dapibus metus. Mauris sed libero consequat, pellentesque sapien ac, tristique felis. Nullam et justo varius, fringilla tellus non, egestas
justo. Morbi sodales libero orci, id viverra nulla lobortis iaculis. In hac habitasse platea dictumst. Pellentesque rutrum sollicitudin augue, nec laoreet dolor mattis non. Mauris non urna ligula. Donec vel velit libero. Sed elit arcu, bibendum
non consectetur eu, varius ut lacus. Fusce commodo nunc ut molestie blandit. In scelerisque suscipit metus, at suscipit felis porta in. Morbi porttitor dapibus malesuada. Fusce vel elit aliquet, convallis nulla eget, ultricies metus.</p>
</div>
</div>
<br/>
<p><em>This is the footer</em>
</p>
</body>
Currently all widths are as percentages. I do not want the content to span the whole width of the page (for easier reading). However on mobile devices (or when the screen width is small enough) I want the content to span the page. However with % widths, the content width constantly changes with the page width. It is ok on a computer screen but for smaller widths the content div becomes too narrow.
An example would be the website medium. You can see (as you resize the window) that for larger widths, the content width remains the same, but for smaller widths the content starts to span the whole page.
Any idea how to achieve that?
you can set a min-width in your .content with any value you may like, just remember you have a fixed sidebar
.container {
width: 100%;
height: 100%;
text-align: center;
}
.sidebar {
position: fixed;
left: 0px;
top: 10%;
height: 80vh;
width: 10%;
background-color: red;
}
.content {
width: 40%;
display: inline-block;
text-align: justify;
min-width: 260px
}
<div class="container">
<div class="sidebar">
THis is the sidebar.
</div>
<div class="content">
<h1>Fourth</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien vel augue auctor tempor. Duis orci velit, congue at ornare non, tincidunt quis sapien. Nam at fringilla tortor. Fusce non pharetra quam. Vestibulum fermentum facilisis urna sed
consequat. Nam rutrum sapien at facilisis porttitor. Fusce vehicula dignissim nisl, vel cursus lorem mattis ut. Sed eros libero, euismod et ligula sed, rutrum varius libero. Nulla eget sem sit amet velit pretium porttitor. Morbi tempus ultrices
urna, in egestas erat cursus ut. In hac habitasse platea dictumst.</p>
<p>Donec efficitur gravida pellentesque. Curabitur dignissim odio at tempus fermentum. Aenean pharetra sed sem sed convallis. Praesent pretium urna sit amet leo porttitor, eu auctor purus consequat. Donec id velit eleifend, fringilla enim vitae, blandit
lacus. Nulla tincidunt sed lacus ac euismod. Nam non blandit diam.</p>
<p>Vivamus hendrerit ex a orci dapibus convallis. Vivamus dictum maximus purus, in condimentum massa molestie ut. Donec aliquet, augue ut consequat consectetur, velit turpis finibus elit, sed porta dui felis sed massa. Nulla aliquam interdum est eget
ornare. Suspendisse cursus nec lorem eu rhoncus. Curabitur vehicula pellentesque egestas. Proin et commodo purus. Nulla malesuada consequat tortor, interdum volutpat est congue sed. Curabitur vitae placerat lacus, vestibulum lacinia mi. Duis auctor
malesuada lacus id consectetur. Etiam venenatis nisi eget tellus accumsan, vel ornare mi porttitor. Curabitur dictum non tortor et laoreet.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent egestas quam orci, et eleifend lectus lobortis vel. Nullam pulvinar porttitor egestas. Phasellus consectetur felis eget erat iaculis pulvinar in
sit amet sapien. Nulla sollicitudin maximus nulla, nec ullamcorper arcu tempor at. Aliquam at nisl massa. Sed eleifend urna sit amet erat semper, ac aliquam quam imperdiet. Ut nec cursus nisl. Quisque feugiat imperdiet tellus sed aliquam. Nulla
magna velit, interdum nec auctor vitae, congue at augue. Phasellus placerat risus et vehicula efficitur. Etiam hendrerit egestas interdum. Nulla placerat fringilla mi et rhoncus. Fusce porttitor, arcu consectetur finibus porta, mi ante ultrices
tellus, nec vulputate diam leo quis tellus. Fusce aliquam nulla vel sem tempus, non elementum est condimentum. Nunc accumsan libero diam, ut varius nibh dapibus luctus.</p>
<p>Integer vitae tempor velit. Sed convallis sed dolor id pulvinar. Donec nisi nisl, accumsan quis ante in, tempor dapibus metus. Mauris sed libero consequat, pellentesque sapien ac, tristique felis. Nullam et justo varius, fringilla tellus non, egestas
justo. Morbi sodales libero orci, id viverra nulla lobortis iaculis. In hac habitasse platea dictumst. Pellentesque rutrum sollicitudin augue, nec laoreet dolor mattis non. Mauris non urna ligula. Donec vel velit libero. Sed elit arcu, bibendum
non consectetur eu, varius ut lacus. Fusce commodo nunc ut molestie blandit. In scelerisque suscipit metus, at suscipit felis porta in. Morbi porttitor dapibus malesuada. Fusce vel elit aliquet, convallis nulla eget, ultricies metus.</p>
</div>
</div>
<br/>
<p><em>This is the footer</em>
</p>
You can use CSS special selectors: example:
#media screen and (max-width: 480px) {
.content {
width: 80%;
}
}
So that the .content will be set to 80% width on small screens.
You may also want to change the sidebar behavior for small resolutions, like setting up his position to initial and expanding his width to the same width as your content, so the design stay coherent.
Here's a fiddle (You need to resize the render frame by click and drag to see it in action )
https://jsfiddle.net/9c3ztska/1/
Now i will introduce to you something very usefull when designing responsive website:
It's a framework called Skel.
Long story short, it uses a grid system, wich let you specify specific size for a div for specific resolutions.
The grid system works with 12 units in width, so 12u represent 100% of the container width.
Here's a code example:
<div class="row">
<div class="6u 12u(small)"> YOUR CONTENT </div>
</div>
What it means:
Your content will be 50% of the container width on large screen, but will expand to 100% on small screens.
If you want to try it out and get fast in it, i recommend you to try baseline wich is a boilerplate using Skel framework.
You can download it and put it on your server (no db needed) and start coding.
baseline comes with pre-configured Skel and "breakpoints" (breakpoints are screen resolutions for wich Skel will swicth between CSS rules)
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 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>