I'm sure that this question has been answered before but I just can't find an answer, I have a page with one main div where all the content is housed in it. I have centered it using this:
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Which works fine when the div's height isnt larger then that of the viewport, but when it is it moves half of the content of screen. This can be easly demonstrated on mobile (see picture)
I would solve this by only applying transform on desktop but then if if the div's height where to increase the problem would reoccur. Or using some JavaScript I could check if the div's height is below that of the view port and then transform but I would prefer to keep it CSS only. How could I solve this?
You can use flexbox + margin tricks:
html,
body {
height: 100%;
}
body {
display: flex;
margin: 0;
}
.center {
max-width: 50%;
margin: auto;
}
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec mi maximus, pretium nunc eget, congue nulla. Nam ornare ornare nisl accumsan suscipit. Quisque blandit tortor ac placerat lobortis. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Ut varius a neque a venenatis. Morbi non justo dapibus, bibendum nunc vel, tempus nulla. Nam ornare, sem nec volutpat tincidunt, arcu arcu facilisis nisi, ut lobortis metus ante quis orci. In velit velit, pellentesque
nec suscipit non, euismod nec metus. Cras pulvinar eu nisl at convallis. Nam vehicula interdum dui, sit amet vestibulum sapien consectetur id. Morbi non velit eros. Fusce ac pretium massa. Nam sit amet nibh ac magna bibendum porta. In maximus tempus
nulla. Sed a massa ligula. Vestibulum viverra odio quis ex consequat semper. Vestibulum ex lectus, pellentesque sed quam eget, porta volutpat magna. Praesent pulvinar auctor ante, eget dictum tortor egestas non. Donec maximus sem eu nisl commodo, quis
varius lectus suscipit. In vestibulum est diam, id ornare lacus fermentum a. Fusce dictum ligula eros, non pellentesque lorem pulvinar consectetur. Nunc sapien metus, feugiat ac sagittis sed, euismod sed purus. Curabitur quis iaculis lacus, dapibus
ultrices leo. Curabitur ac lacinia purus. Pellentesque accumsan pulvinar erat non viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In venenatis porttitor erat non eleifend. In eget auctor nulla.
Aenean ultricies dapibus nisi eget venenatis.
</div>
I suggest you to add a margin-top and a margin-bottom to your div : on desktop, t will change nothing, but on a mobile device, your div's height will be shorter.
Related
So what my goal is, is to position this div background box "lightgrey", with the text which is in another div, but everytime i get the divs positioned the way I want, they seem to be offset, I was thinking of creating a #media_query but I felt like I would have to create way too many statements to have it adjust accordingly, if anyone has any suggestions that would be great.
<div style="width:200px; height:200px;right:0;margin-right:7%; border: 5px;
solid:grey; background-color:lightgrey;position:absolute;">
</div>
<div style="position:absolute;right:0;margin-right:10%;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
The first image is of a map leaflet that does what I want to achieve and its essentially dynamically changing the size without losing its position, verses what I created which constantly moves out of position when i resize the screen.
Leaflet Map (my goal):
This first image is ideal with how I would want it positioned:
When I resize this happens:
I don't have a ton of experience with css, I'm in a web development class right now, but I wont be able to see my professor because of the holidays, if anyone could give me some suggestions I would really appreciate it!
Any suggestions?
html code: https://pastebin.com/iTmsyV5Z
I can't really get a full example working to test but something like:
<div style="width: 200px; height:200px; border: 5px;
solid:grey; background-color: lightgrey; float: left;">
</div>
<div style="margin-left:10%; float: left;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
or
<div style="width: 200px; height:200px; border: 5px;
solid:grey; background-color: lightgrey; float: left;">
</div>
<div style="margin-right:10%; float: right;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
Should work after some adjustments of the values. Not sure if you want the grey box all the way to the right or left.
I achieved this by using relative positioning. And floating both elements left so they stack horizontally. I believe this is what you wanted.
By adding the element within your main container, absolute positioning will work nicely. This will then scroll with the container. If you require it to stay where it is on the screen, you will need to use fixed positioning, it will then be relative to your viewport. So keep in mind when adjusting your top and right positioning to compensate.
.Menu,
.Content {
position: fixed;
background-color: #CCC;
left: 10%;
right: 10%;
}
.Menu {
top: 10px;
height: 50px;
}
.Content {
top: 70px;
bottom: 10px;
overflow: auto;
padding-right: 250px;
}
.Floating {
position: absolute;
background-color: #EDEDED;
right: 20px;
top: 20px;
width: 210px;
height: auto:
}
<div class="Menu">
This is the menu
</div>
<div class="Content">
<div class="Floating">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lectus eros, placerat euismod nisl pharetra eget. Fusce commodo ipsum non ipsum fringilla dignissim. Integer eu mi ligula. In hac habitasse platea dictumst. Cras aliquet luctus felis
nec rutrum. In in magna eros. Donec tellus ipsum, auctor et eleifend non, mollis quis mauris. Praesent cursus malesuada mattis.
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lectus eros, placerat euismod nisl pharetra eget. Fusce commodo ipsum non ipsum fringilla dignissim. Integer eu mi ligula. In hac habitasse platea dictumst. Cras aliquet luctus
felis nec rutrum. In in magna eros. Donec tellus ipsum, auctor et eleifend non, mollis quis mauris. Praesent cursus malesuada mattis. Morbi id quam libero. Donec laoreet ullamcorper lobortis. Etiam quis est ac lacus varius malesuada. Nunc venenatis
rutrum dui, id euismod nunc porttitor id. Nulla id sapien imperdiet, ullamcorper felis et, rhoncus tortor. Quisque purus tellus, molestie a urna in, bibendum bibendum mauris. Nunc aliquet ornare tincidunt. Praesent leo diam, fermentum nec tempor in,
pellentesque eget velit. Aenean luctus mauris et turpis vehicula, at tristique ex gravida. Vivamus finibus, tellus vel volutpat facilisis, enim metus mattis mi, quis dictum tortor mi a mauris. Pellentesque malesuada tellus non consectetur feugiat.
Proin rutrum sem nec odio varius tincidunt. Quisque egestas enim et orci scelerisque, quis viverra lectus tristique. Donec consectetur, lacus sed vehicula lacinia, ipsum arcu consequat odio, sed porta erat neque eu lacus. Proin consequat quam vitae
nisl vulputate, ut imperdiet justo ultricies. Phasellus dictum vestibulum ullamcorper. Quisque lobortis eros sed ante porta ultricies. Suspendisse sit amet purus non enim fringilla pellentesque. Sed posuere, metus ut venenatis pretium, enim urna laoreet
sapien, accumsan condimentum mauris nisi sed elit. Nunc mollis sit amet enim ac placerat. Donec elementum consectetur ipsum in molestie. Fusce auctor sollicitudin lorem a pharetra. Vestibulum blandit consectetur sagittis. Nullam varius commodo dictum.
Sed tempus a nulla nec feugiat. Sed pharetra mattis velit sed sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sit amet vehicula felis. Nullam faucibus interdum rhoncus. Proin eget velit non
nunc dignissim vestibulum sit amet id nulla. Nunc a lectus mauris. Sed sagittis orci ullamcorper nisi ullamcorper dictum. Etiam ut tellus tortor. In a molestie tortor. Quisque turpis tellus, fermentum euismod eros a, vulputate aliquam sapien. Integer
nunc dui, scelerisque nec interdum id, auctor ut ante. Curabitur pharetra dui vitae tellus tincidunt auctor. Etiam eget fringilla massa. Phasellus auctor lorem hendrerit massa porttitor, luctus consequat leo semper. Curabitur sollicitudin est sapien,
sed vulputate neque finibus ac. Aliquam pulvinar enim ac mi congue, eu dapibus velit imperdiet. Suspendisse pretium tellus eu urna auctor, quis sodales erat varius. Aenean eget felis mi. Suspendisse non tellus in mauris congue finibus et et risus.</div>
</div>
I want to put a static image (height: 100% of viewport, width: auto) next to a scrollable text. I can manage to code it, as long as I put to floating divs with a width of 50% next to another, but then my image gets messed up. It is important, that the image
a) shows a complete height within the viewport
b) the div with the text changes according to the auto width of the image
Just like this:
I believe I was able to achieve the effect that you wanted. I had to use some JS though.
resize();
function resize() {
var image = document.getElementById('image');
var text = document.getElementById('text');
text.style.width = (window.innerWidth - image.width) + 'px';
}
body, html {
margin: 0px;
overflow: hidden;
}
.image {
display: inline-block;
height: 100vh;
}
.text {
position: absolute;
height: 100vh;
right: 0px;
top: 0px;
font-size: 28px;
overflow-y: auto;
}
<html>
<body onresize="resize()">
<img id="image" src="https://www.leonardodavinci.net/images/gallery/mona-lisa.jpg" class="image">
<div id="text" class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.</div>
</body>
</html>
I am trying to do a sticky header with position: sticky style.
The problem with position sticky is it wont work, if the parent container has some overflow set. But, in my case, I have a horizontal scroll. Since, I am putting a scroll for parent container ( overflow-x), the sticky is not working.
JSBin Link
.sticky {
position: sticky;
top: 10px;
z-index: 1;
}
In the example given you can see that, first block sticky is not working (because I have set overflow-x). But, it is working for the second item.
So, my question is how to make position sticky work with overflow-x set for parent.
as you probably know, setting position:sticky;top:10px on an element means that at first it is considered with position:relative and then after 10px with position:fixed ;
you need to set a height for the scrollable content. at least this is the only solution i know when you want position:sticky to work with overflow
hope it helps
OBS : check it in Firefox because in Chrome it doesn't work ( position:sticky -> This is an experimental API that should not be used in production code. i suggest you find another solution. like position:fixed and use JQ to position the headers relative to their containers )
html, body {
overflow: initial;
background: none;
}
body {
box-sizing: border-box;
margin: 0 150px;
font-family: 'Source Sans Pro', sans-serif;
}
.sticky {
position:sticky;
top: 10px;
z-index: 1;
}
[data-lorem] {
margin-top: 2em;
line-height: 1.5;
text-align: justify;
background: #eee;
border-radius: 5px;
padding: 15px;
}
[data-lorem] .sticky {
background: #3A5E8C;
padding: 15px 10px;
color: white;
border-radius: 5px;
display: inline-block;
width: 100%;
box-sizing: border-box;
}
[data-lorem] h2 {
float: left;
margin: 0;
}
[data-lorem] img {
float: right;
margin-top: 5px;
}
.nosupport {
color: darkred;
font-weight: bold;
display: none;
text-align: center;
}
<div data-lorem="p" style="
overflow-x: scroll;height:80vh;
">
<div class="content_area" style="
width: 1000px;
">
<span class="sticky"><h2>No</h2><img src="http://www.html5rocks.com/static/images/share.png" title="Just an example"></span>
Donec et odio pellentesque diam. Interdum varius sit amet mattis. In fermentum posuere urna nec tincidunt praesent semper. Auctor augue mauris augue neque. Vitae congue eu consequat ac felis donec. Pellentesque diam volutpat commodo sed egestas egestas. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Pellentesque nec nam aliquam sem. Enim lobortis scelerisque fermentum dui faucibus in. In nibh mauris cursus mattis molestie a iaculis at erat. At lectus urna duis convallis convallis tellus id interdum velit. Massa sapien faucibus et molestie.
Proin libero nunc consequat interdum varius sit. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Sem viverra aliquet eget sit amet tellus cras adipiscing. Tortor consequat id porta nibh. Diam maecenas sed enim ut. Cras ornare arcu dui vivamus arcu felis. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Enim tortor at auctor urna nunc id. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Nisi scelerisque eu ultrices vitae auctor eu augue.
Vulputate dignissim suspendisse in est ante in nibh mauris. Netus et malesuada fames ac turpis egestas integer eget aliquet. Turpis egestas integer eget aliquet nibh praesent tristique magna. Ut placerat orci nulla pellentesque dignissim enim. Et egestas quis ipsum suspendisse ultrices gravida. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Pretium vulputate sapien nec sagittis aliquam malesuada. Sit amet nulla facilisi morbi tempus. A erat nam at lectus urna duis convallis. Commodo quis imperdiet massa tincidunt nunc pulvinar. Justo eget magna fermentum iaculis. Ac ut consequat semper viverra nam libero justo laoreet. Neque volutpat ac tincidunt vitae semper. Lacus vel facilisis volutpat est velit. Nunc sed blandit libero volutpat sed cras. Et magnis dis parturient montes nascetur ridiculus. Vitae congue eu consequat ac. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu.</div></div>
<div data-lorem="p">
<span class="sticky"><h2>JavaScript</h2></span>
Donec et odio pellentesque diam. Interdum varius sit amet mattis. In fermentum posuere urna nec tincidunt praesent semper. Auctor augue mauris augue neque. Vitae congue eu consequat ac felis donec. Pellentesque diam volutpat commodo sed egestas egestas. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Pellentesque nec nam aliquam sem. Enim lobortis scelerisque fermentum dui faucibus in. In nibh mauris cursus mattis molestie a iaculis at erat. At lectus urna duis convallis convallis tellus id interdum velit. Massa sapien faucibus et molestie.
Proin libero nunc consequat interdum varius sit. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Sem viverra aliquet eget sit amet tellus cras adipiscing. Tortor consequat id porta nibh. Diam maecenas sed enim ut. Cras ornare arcu dui vivamus arcu felis. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Enim tortor at auctor urna nunc id. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Nisi scelerisque eu ultrices vitae auctor eu augue.
Vulputate dignissim suspendisse in est ante in nibh mauris. Netus et malesuada fames ac turpis egestas integer eget aliquet. Turpis egestas integer eget aliquet nibh praesent tristique magna. Ut placerat orci nulla pellentesque dignissim enim. Et egestas quis ipsum suspendisse ultrices gravida. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Pretium vulputate sapien nec sagittis aliquam malesuada. Sit amet nulla facilisi morbi tempus. A erat nam at lectus urna duis convallis. Commodo quis imperdiet massa tincidunt nunc pulvinar. Justo eget magna fermentum iaculis. Ac ut consequat semper viverra nam libero justo laoreet. Neque volutpat ac tincidunt vitae semper. Lacus vel facilisis volutpat est velit. Nunc sed blandit libero volutpat sed cras. Et magnis dis parturient montes nascetur ridiculus. Vitae congue eu consequat ac. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu.</div>
I'm struggling to get my div (#content) to full 100% height of the page, if I resize my browser, my div (.divAboutRight) stretches accordingly to accommodate the content but my wrapper div (#content) does not? I have an image (#logo) which is centered to it's parent (#content) which it is not doing when the parent doesn't fill 100%.
I'm sure I'm missing something really basic.
Any assistance or guidance would be appreciated.
<style>
html{margin:0; padding:0; width:100%; height:100%;}
body{height:100%;min-height:100%; margin:0; padding:0; width:100%; background-color:#fb9f32; color:#FFF;}
.head{width:100%; height:60px; background-color:#FFFFFF;}
#content{width:100%;height:100%;min-height: 100%; position:relative; border:1px solid red;}
#Back
{
position:absolute;
left:0;
background:url(../images/Back.png) no-repeat;
background-size: 100% 100%;
float:left;
min-width:55%;
height:59%;
border:1px solid green;
}
#logo
{
display:block;
position: absolute;
top: 50%;
left: 50%;
max-height: 132px;
max-width: 133px;
margin: -66.5px 0 0 -66px;
z-index:9999999;
}
.divAboutRight{width:35%; margin-right:5%; margin-top:3%;float:right; border:1px solid yellow;}
</style>
<body>
<div class="head">
<!-- Header Content -->
</div>
<div id="content">
<div id="Back">
<!-- absolute positioned -->
</div>
<!-- Fixed logo to be center of content wrapper -->
<img id="logo" width="133" height="132" src="images/logo.png"/>
<div class="divAboutRight">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et volutpat metus. Cras et ante in enim sollicitudin facilisis quis eget lacus. Donec a justo in lacus ornare porttitor feugiat sit amet velit. Nunc iaculis, tellus quis sollicitudin placerat, leo nulla viverra lectus, id semper massa arcu in purus. Vivamus dictum venenatis metus quis viverra. Donec euismod, mauris vel aliquam convallis, lectus diam scelerisque lacus, id adipiscing orci augue nec arcu. Nulla molestie est lobortis tempor consectetur. Curabitur convallis malesuada velit et volutpat. Morbi a commodo velit. Integer malesuada nunc augue, ac convallis justo sollicitudin a. Nam nulla urna, facilisis quis ullamcorper dictum, venenatis eu ante. Ut consectetur sit amet lacus sed posuere. Nunc facilisis est eu ultrices scelerisque.
Cras feugiat tincidunt justo, et eleifend felis pretium ac. Nulla ornare, massa eu tincidunt tristique, sapien enim congue nisl, id pellentesque nisl lorem vel dolor. Mauris imperdiet, diam ac aliquam convallis, eros ante rhoncus justo, non malesuada mi nulla non sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Praesent sapien velit, sodales eget odio at, ullamcorper molestie nibh. Mauris iaculis posuere leo, non sollicitudin libero ullamcorper quis. Integer lobortis et eros vitae imperdiet. Ut ligula sem, tempor quis lobortis imperdiet, interdum ac nisl. Sed non lectus mauris.
Donec mattis lorem dolor, a feugiat neque dictum in. Nullam pharetra magna mi, quis hendrerit odio vestibulum id. Donec faucibus risus sed felis mattis pharetra vel a enim. Curabitur ultrices bibendum dapibus. Nulla sit amet metus mauris. Phasellus at tellus est. Mauris sagittis, eros quis laoreet sodales, tortor justo tempus dolor, et tincidunt dui tellus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque vitae pulvinar sapien. Praesent pellentesque metus sem, pellentesque ullamcorper augue pellentesque eu.
In neque lectus, ultricies ultrices nisi sed, commodo viverra justo. Cras quis neque vulputate, elementum ante non, pellentesque urna. Fusce id tempus magna. Fusce nec tortor id nulla pharetra sodales nec at tellus. Suspendisse gravida felis non turpis consequat, sit amet gravida risus ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis elementum consequat mauris ut accumsan. Donec nec aliquet tortor. Donec turpis tellus, convallis at faucibus sed, volutpat ac turpis. Vestibulum consequat sapien mi, et ultricies libero convallis ultricies. Mauris placerat mollis elementum. Nulla molestie felis purus, sed hendrerit enim vehicula ac. Curabitur adipiscing fringilla ultricies. Nunc hendrerit libero non aliquet egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis dui a enim interdum aliquet.
Nulla sagittis ligula enim, in vulputate lectus tincidunt ac. Sed imperdiet gravida orci at semper. Proin mollis adipiscing neque, vitae convallis risus rutrum eget. Praesent augue neque, lacinia nec tincidunt sed, elementum non sem. Suspendisse a mi condimentum, pellentesque lorem id, tempor turpis. In tortor nibh, convallis egestas ornare scelerisque, semper non nisi. Pellentesque ullamcorper euismod malesuada. Curabitur condimentum arcu id lorem posuere tincidunt. Proin convallis, elit vel fringilla tincidunt, eros diam ullamcorper lacus, eget posuere tortor velit vestibulum lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet pellentesque lacus. Maecenas molestie augue id ipsum feugiat, non pulvinar mi eleifend. Aenean augue metus, tincidunt non pellentesque eu, tristique quis metus. In a neque viverra, commodo velit ut, pretium diam.
</div>
</div>
</body>
From what I can see, Your div #content does not cover the full height because you have a div .head with a height of 60px;
Yo can either float your .head div or make it's position:absolute;
You could also include the .head div iside the #content div like this:
<body>
<div id="content">
<div class="head">
<!-- Header Content -->
</div>
<div id="Back">
<!-- absolute positioned -->
</div>
<!-- Fixed logo to be center of content wrapper -->
<img id="logo" width="133" height="132" src="images/logo.png"/>
<div class="divAboutRight">
<!-- Dynamic Content -->
</div>
</div>
</body>
If you are OK supporting IE9+, here is the code:
<style>
#content{
.
.
height:calc(100% - 60px);
.
}
</style>
Calc is supported in all modern browsers now.
On the other hand, if you can't support calc, here is one more way:
<style>
.head {
... // rest of head's css
z-index: 2;
}
#content {
position: relative;
box-sizing('border-box');
height: 100%;
padding-top: 60px; // height equal to the header
margin-top: -60px; // this will offset your content up again
z-index: 1; // make the content go BEHIND the head
... // rest of the CSS
}
</style>
note: this will make the scrollbar start from behind the head, because the content will be under the head.
I have a two column layout (using the CSS multi-column layout module) and I'd like to have an image at the top of the second column. It seems like I have to place the image myself so that it's in the place in the text where the break will be.
The problem is I want the columns to be evenly filled as well.
Is there any way to solve this without JavaScript? This uses a div instead of an image but the idea is to place the red block at the top of its column.
.col-2 {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
width:800px;
}
.block {
width:100%;
height:100px;
background-color:red;
}
<div class="col-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit neque sed eros posuere molestie. Quisque mattis ante ac mauris iaculis semper vehicula nibh condimentum. Pellentesque scelerisque euismod metus a sodales. Praesent dolor nisl, consectetur at tincidunt eu, dapibus at orci. Etiam congue metus id sapien rutrum euismod. Proin porttitor rhoncus hendrerit. Phasellus pellentesque venenatis felis a eleifend. Suspendisse pretium placerat hendrerit. Praesent tempus risus in ligula condimentum egestas. Vivamus vitae nunc massa, luctus egestas lectus. Vivamus at turpis sed nisl molestie vulputate. Vivamus nec tortor et ante consectetur dignissim ac in odio. Cras et nisl non enim congue scelerisque. Curabitur in condimentum eros. Curabitur vehicula augue id neque dignissim vitae venenatis nisi feugiat.
Curabitur tristique ullamcorper neque, ac sodales eros suscipit eu. Nulla pretium accumsan lacus, non fermentum felis lacinia mattis. Sed quis turpis eros. Nullam ut turpis libero. Nam quis magna ac tortor elementum pulvinar. Quisque rutrum eleifend elit, eget consectetur nulla dapibus ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean rhoncus commodo tellus, sit amet pulvinar mi vehicula non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi mollis dignissim felis, et posuere quam molestie nec. Duis sit amet pulvinar dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lorem justo, lobortis id imperdiet nec, lobortis varius mauris. Nullam sit amet nulla arcu. Nullam ornare posuere leo vitae rhoncus.
Sed venenatis dui sapien. Praesent sed enim lacus, vitae venenatis metus. Aenean bibendum nibh a risus scelerisque blandit. Maecenas nibh enim, pulvinar in interdum quis, rhoncus ut orci. Vestibulum a ullamcorper ante. Nulla facilisi. Pellentesque placerat ullamcorper diam at mattis. Aliquam posuere suscipit metus sed sollicitudin. Phasellus in quam odio, ac scelerisque purus. Morbi at nunc odio, nec aliquam urna. Proin mi orci, varius vitae dapibus ac, consequat id purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a dui lectus, ut congue nunc. Cras diam tortor, auctor in vehicula vitae, egestas eget neque. In nisi odio, laoreet a convallis in, varius at risus.
<div class="block"></div>
</div>
The CSS3 spec has a "column-break" style, but it has only been implemented in Webkit. It would do exactly what you are looking for, but only in Safari and Chrome sadly.
You would need to have your column breaking element fall within the normal flow of your content, and add the following style:
div.block {
width: 100px; /* this shouldn't be more than your column width */
height: 100px;
-webkit-column-break-before: always;
}
Example (View in Safari/Chrome)
http://css-infos.net/property/-webkit-column-break-before
http://www.w3.org/TR/css3-multicol/#column-breaks
You can wrap the two divs in another div and have the .block div before the .col-2 div in your markup.
Example for you here.
If I understand what you are trying to do (make the div or image span the full with of all the columns) the way to do this with CSS is to specify column-span: all; on the element (img or div) you want to span across the full width. This is currently only supported in Opera however, and only in an internal build (hopefully we will have a public release with it included soon).
Without using column-span you will have to rely on script or move the mark up to be outside of the element you apply column-count on.