I'm working on a webpage with a tabular layout, with three cells: top, bottom-left, bottom-right. The top cell contains a header element and has a height of 105px. The bottom-left cell is a navigation pane. The header and navigation pane are both fixed. The bottom-right cell is the content pane. The bottom two cells are wrapped in a div. I want the bottom wrapper to be essentially the height of the page minus the height of the header element (105px) so that the whole page is covered. I've looked around, but none of the solutions I've found have worked. This is my CSS (I'm using SASS):
div#lower-container {
position:absolute;
width:100%;
height:100%;
div#navigation {
width:20%;
background-color:transparent;
position:fixed;
top:105px;
height:100%;
border-right:1px solid $blue;
};
div#content {
position:absolute;
top:105px;
width:80%;
height:100%;
background-color:white;
margin-left:20%;
overflow-y:scroll;
};
};
And here is my HTML code:
<div id="lower-container">
<div id="navigation">
</div>
<div id="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
And finally, a screenshot of what it looks like now: http://i.imgur.com/jsXa5.png
I would prefer to use pure CSS/SASS, and not JavaScript/jQuery. Thanks!
If I understood you right, you want something like this?
CSS:
#wrapper{
height:100%;
width:100%;
#top:{
position: absolute;
height: 135px;
}
#content{
position: relative;
height:100%;
}
}
HTML:
<div id="wrapper">
<div id="top">PICTURE</div>
<div id="content">Lorem Ipsum Dolor Sit Amet Bla Bla Bla</div>
</div>
CSS3 supports the calc operation, so you're probably looking for
height: calc(100% - 105px);
(The spacing around the - is important)
Related
The dashboard and content classes are universal in the app (that means they are on every template or page). The header class is only available on certain pages.
<div class="dashboard">
<div class="header"></div>
<div class="content"></div>
</div>
What I want is, to add the rule 'fixed position to the header class and fix it to the top of the page on those pages that it exists and give it a white background across the window. Now, when I do that, the content inside the div with content class goes under the header. But, I want that content to have a top margin and be positioned under the header div on only the pages where the header exists.
I know I can add a top padding or margin to the content class, but that will affect all the pages with the content class, but I don't want that to happen?
How can I conditionally achieve this goal?
I think for pages where you have header followed by content ,you can apply styles as .header ~ .content and for other pages may be you can just style it as .content
check this snippet
.header{
position:fixed;
background:red;
left:0;
top:0;
width:100%;
}
.header ~ .content{
margin-top:50px;
background:gray;
}
<div class="dashboard">
<div class="header">khfdsfjksd</div>
<div class="content">
Lorem ipsum dolor sit amet, facilisis orci, risus accumsan mauris mi aliquam, mattis felis, condimentum vel arcu pellentesque vulputate et scelerisque. A mi ut arcu nunc odio, nunc aliquam, vel libero orci bibendum pellentesque. Placeat eget mauris tortor dignissim habitant, viverra nunc urna in. Massa lectus mauris felis nibh. Non imperdiet ut, cum vivamus soluta porta sed, quisque erat diam blandit dolor.Lorem ipsum dolor sit amet, facilisis orci, risus accumsan mauris mi aliquam, mattis felis, condimentum vel arcu pellentesque vulputate et scelerisque. A mi ut arcu nunc odio, nunc aliquam, vel libero orci bibendum pellentesque. Placeat eget mauris tortor dignissim habitant, viverra nunc urna in. Massa lectus mauris felis nibh. Non imperdiet ut, cum vivamus soluta porta sed, quisque erat diam blandit dolor.Lorem ipsum dolor sit amet, facilisis orci, risus accumsan mauris mi aliquam, mattis felis, condimentum vel arcu pellentesque vulputate et scelerisque. A mi ut arcu nunc odio, nunc aliquam, vel libero orci bibendum pellentesque. Placeat eget mauris tortor dignissim habitant, viverra nunc urna in. Massa lectus mauris felis nibh. Non imperdiet ut, cum vivamus soluta porta sed, quisque erat diam blandit dolor.
</div>
</div>
<div class="content">
sfhdskfdsk
</div>
In SCSS your code should be like this
.dash-board {
.header {
position: fixed;
background: red;
left: 0;
top: 0;
width: 100%;
~ .content {
margin-top: 50px;
background: gray;
}
}
}
hope it helps
You can easily manipulate it with another class. I added some jQuery for demostration... I hope I got your question right though. Check this fiddle out.
$(function() {
var $button = $("button");
var $header = $(".header");
var $content = $(".content");
$button.on("click", function() {
if ($button.hasClass("active")) {
$button.removeClass("active");
$header.removeClass("active");
$content.removeClass("active");
} else {
$button.addClass("active");
$header.addClass("active");
$content.addClass("active");
}
});
});
This worked as well...
Add a wrapper div (header-wrapper) and nest the header div inside.
<div class="dashboard">
<div class="header-wrapper">
<div class="header"></div>
</div>
<div class="content"></div>
</div>
Position the wrapper header relative to the dashboard and add a margin-bottom to it. Then, give a fixed position to the header.
.header-wrapper {
positon: relative;
height: 50px;
margin-bottom: 50px;
}
.header {
position: fixed;
// additional rules
}
I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.
Think of the stackoverflow site image above (if the text wasn't actually part of the image).
Consider if the orange bars continued till it was over the 'K'
Here is a crude example (# represents the image).
#################
#################
#####
##### TEXT GOES HERE
#####
I hope that I was able to adequately explain.
It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).
<td valign="left">
<div style="float:left;">
<img src="image.png" />
</div>
<div style="float:left;vertical-align:bottom; margin-right:100px">
<asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
</div>
</td>
i'm not 100% on the solution you want, but i imagine it's something like this?
http://jsfiddle.net/ujL4pwx9/1/
HTML
<div class="foo">
<img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
}
img{
width:300px;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.
is this what you meant?
but personally i'd not use img and instead use a background-image
http://jsfiddle.net/9ka1fq2j/3/
HTML
<div class="foo">
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
height:300px;
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
background-size:cover;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width.
span {
background: white;
margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:
div {
float: left;
}
img {
vertical-align: bottom;
}
span {
background: white;
margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>
The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.
More about z-index in here and here.
I am having trouble making one div height move with the other/be equal. I need these to be equal as the left sidebar will have more content but I would still like the right div height to move with it as its a sidebar.
<div id="maincontainer">
<div class="contentcontainer">
<div class="postcontentcon">Nam eu auctor enim, id tincidunt dolor. Sed et lacinia sem. Donec pretium quam eget nunc vestibulum, vel sagittis nibh bibendum. Fusce eleifend sagittis ultrices. Nullam lobortis ultricies justo, nec tempus metus sollicitudin at. Proin sit amet turpis a orci ullamcorper pulvinar id vitae erat. Fusce sodales iaculis nulla ac faucibus. Vivamus blandit placerat nunc, nec dictum velit tincidunt in. Pellentesque elementum odio metus, eget fringilla nisi imperdiet quis. Etiam facilisis magna pellentesque lorem luctus condimentum. Nulla blandit ac ligula nec aliquam. Cras massa felis, condimentum condimentum ligula in, pharetra fermentum felis. Proin sed lorem interdum, lobortis lectus non, porta tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="postsidebarcon">Hello</div>
</div>
CSS
body { background-color:#606061; }
.contentcontainer {
margin:0 auto;
position:relative;
width: 1017px;
height:auto;
}
.postcontentcon {
margin:0 auto;
position:relative;
width: 694px;
background-color:#525253;
float:left;
}
.postsidebarcon {
margin:0 auto;
position:relative;
width: 323px;
height:inherit;
background-color:#484848;
float:left;
}
You have a few ways to do his :
display:flex and sizing your containers, default will draw child
side by side demo
display:table on parent + width and display:table-cell; on child + width : demo
clearing floats . float first element, set margin to second, add a pseudo with clear:both (or left/right) demo
faux-column technique, oldish but solid , fine here since parent container has a fixed width The idea is to draw the column onto background of parent : demo (here i used a gradient for the demo, but usally it is an image. You can use multiple background nowdays.
there is other tricky ways with: floatting & hudge heights , negative margin ,overflow. some will even use absolute positionning but you should stay away from using these.
I can't get my content to go into a wrapper, it just shows on the left side
<div id="middle">
<div class="wrapper">
<div id="image_rose"><img src="assets/rose.jpg"/></div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci.</p>
<img src="assets/leef.png" />
<p>Text Input:</p>
CSS:
.wrapper{
background-color:#666666;
width:900px;
margin:0px auto;
text-align:left;
}
#middle{
background-color:#666;
width:900px;
float:left;}
You're putting your content and wrapper into #middle, which floats left. wrapper is the same size and middle, so will just site on the left.
You can clear your float as shown below:
clear:both
If the content is showing beyond the div, you might try adding an overflow: hidden; or a different overflow setting to that specific div in your css.
Try this layout for centering your middle content
HTML
<div id="wrapper">
<div id="middle">
</div>
</div>
CSS
#wrapper
{
width:100%;
padding:0px;
margin:0px;
}
#middle
{
margin:0 auto;
width: 600px;
}
I have a bit of a problem placing a footer. It's supposed to float above 2 side by side columns (http://imgur.com/dfiT1). Now the problem is, it needs to be aligned well so that the border of the 2 columns is aligned with the border of the 2 parts of the footer, AND, it needs to have a minimum margin of say 100px on both columns, so that the footer doesn't float above the content of either of the columns when a page has very little or a lot of content.
I've tried resolving this with a coworker by using an extra wrapper, a clearfix, jquery for height adjustment but we can't seem to find a solution.
so in short: Footer needs to stick to the same position in big and small resolutions, minimal margin-top on both columns
Try do add min-height: 100%; to both columns, and put them in the same div.
The best solution, in my opinion, would be to place the footer outside of the two columns. But I know that sometimes there are constraints that you can't change, so a possible solution would be:
HTML
<div class="wrapper"><div id="column1" class="column">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisl purus, lobortis et adipiscing non, vestibulum et tortor. Praesent aliquam placerat enim sit amet blandit. In ipsum dui, accumsan at hendrerit nec, tempus in augue. Etiam molestie, orci a feugiat tempus, nunc quam posuere libero, et ultrices libero sem porta arcu. Donec varius, massa at feugiat accumsan, mi lacus aliquam arcu, id faucibus arcu felis et sapien. Praesent sit amet tortor nibh. Nam mollis, ante quis iaculis fringilla, ante sapien dignissim ligula, in dignissim urna nisl ut ante. Mauris eget diam justo, nec tempor justo. Donec vel eros eget risus rhoncus dapibus. Nullam at felis faucibus orci molestie feugiat sit amet ut augue. Vestibulum at tellus tortor, non tempus quam. Phasellus adipiscing ante a purus congue ultrices in non justo. Ut ullamcorper porttitor quam, sit amet tincidunt mauris hendrerit at.
</div>
<div class="footer">
Donec facilisis accumsan nisl
</div>
</div><div id="column2" class="column">
<div class="content">
Aenean pharetra sagittis ipsum, vitae pulvinar nunc aliquet ut. Fusce sit amet elit dui, a vulputate risus. Maecenas in laoreet tortor.
</div>
<div class="footer">
Pellentesque malesuada ligula eget justo
</div>
</div>
</div>
CSS
html, body, .wrapper {
margin:0;
border:0;
outline:0;
}
.column {
display:inline-block;
margin:0;
padding:0;
vertical-align:top;
}
#column1 {
width: 30%;
background-color:teal;
}
#column2{
width: 70%;
background-color:coral;
}
.wrapper{
position: relative;
background-color: black;
padding-bottom: 200px;
}
.footer {
position: absolute;
bottom: 50px;
background-color: silver;
}
#column1 .footer {
right: 70%;
}
#column2 .footer {
left: 30%;
}
live demo
There would be other solutions, but this one seems the easiest to me, as lond as the footer's height is constant.