I have a 4 column layout with a standard header and footer. Its something like this
<div id="header"></div>
<div id="leftnav"></div>
<div id="maincontent"></div>
<div id="nextcontent"></div>
<div id="addtionalinfo"></div>
<div id="footer"></div>
Something like this http://jsfiddle.net/gaby/mBuf9/
But when there is no content/data in the center i want the right most div to span and take up the entire content space. And similarly if there is no content in the left most div i want the maincontent to span the remaining space. is there a way to do it?
You can try something like the following.
Here is the fiddle with content:
http://jsfiddle.net/mBuf9/27/
And the same fiddle without content:
http://jsfiddle.net/mBuf9/28/
The main change is that the divs are placed in a table and some small changes in css.
Hope this helps...
Related
I'm new to CSS-frameworks.
Normally I start my markup within the body by adding a div with the class "wrap". The purpose of that, is to get the content horizontally centered. And for having a top-, bottom-margin.
Now with Foundation I would like to keep that approach. But I'm not sure where to put the "wrap"-div.
That's what I got currently:
.wrap {
margin: 10px auto;
}
<div class="wrap">
<div class="row">
<div class="small-12 columns">
<div class="callout">
<h1>Lorem Ipsum</h1>
</div>
</div>
</div>
</div>
Demo with Foundation added on CodePen: http://codepen.io/mizech/pen/LWBOvQ
I mean: It works but I'm not sure if I do it right.
Shall I keep it the way it is? Or should I put the "wrap"-div somewhere else?
Should I perhaps leave the "wrap"-div at all (when using Foundation) and doing something else instead?
You don't need a wrap div. Foundation has a maximum width set on the .row so anything inside it will conform to that grid. If you need you can add a class with vertical margins or padding to that row. If you need a full width row you just add the class .expanded to it.
I'd like to make my table go full width (prior to my table my content is restricted next to three blocks which I'm cool with).
The table appears after the words "A selection of awards won:"
You can see the page - here
Would this be possible with inline css?
Thanks,
Sam
The best solution is removing your table from the:
<div id="right">
And creating a new div bottom or something with 100% width under the div right/ div left.
<div id="bottom" style="width: 100%"><table>
This should fix your problem,
You can't go full width because your container .sub-content is not full width...
If you want to go full width you will have to put your table in another container that is at the same level as the .left and .right container but with full width.
Something like :
<div id="content-sub">
<div id="left">...</div>
<div id="right">...</div>
<div id="bottom">
<!-- Your table goes here -->
</div>
</div>
with :
#bottom{
display: block;
width:100%;
}
Simply copy your your table code out and place it just above this code
<br clear="all" />
<div id="footers">
I am trying to create a layout here which looks like the following: Here's the fiddle
<body>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
This is the content section
</div>
<div class="stream-content">
This is the stream content.
</div>
<div class="push">
</div>
</div>
<div class="footer">
</div>
<body>
I want the content section to take up the full space between the header and footer section. There is an additional section called [stream-content] which if there (will be there only on home page) has to take the position just before the footer. And in that case, the content section should take up space all the between header and stream-content section. I tried doing the same with absolute positioning but all my elements were going haywire, so wanted to understand the correct way of doing this. Thanks in advance for all help!
Add position:relative to your wraper class.
Add position:absolute;bottom:0; to the stream-content class.
Check it here.
Fiddle
If I understand correctly then one way to do it would be to put [steam content] outside the wrapper, as wrapper is the one that is keeping the footer at the bottom. If you must have the [steam content] inside wrapper than you can try something like this http://ryanfait.com/sticky-footer/ to keep it at the bottom together with the footer
Hi I have just completed my site. I'm having problems with my print style. My html is as below:
<div id="container">
<div id="main">
<h1>title</h1>
<div class="blockright">image in here and text</div>
<p>paragraphs of text</p>
<div class="blockleft">image in here and text</div>
<p>Even more paragraphs of text</p>
<div class="clear"></div>
<div class="footer">Copyright here</div>
</div>
</div>
.blockright has af ixed width and floats right
.blockleft has a fixed width and floats left has a width of auto
.main has a width and houses the content
In my print css, i would like .blockleft and .blockright to be aligned to the bottom of the printed page before the footer. Each page on the site has to be printable and I don't want to manually reposition the page to print the article or have to have a custom style for each page to print properly. Does anyone know how to get a div aligned to the bottom of the page. I tried absolute positioning but I could not get it to work. Any ideas?
Many thanks in advance
in your print style sheet
#main {
position:fixed;
bottom:0;
left:0;
display:block
}
If you don't want all of #main to go to the bottom just wrap another div around .blockleft and .blockright and apply this css to it. Alas this will probably not work in IE6, however you may try applying some of the techniques used to apply a sticky footer to a page. here's one example http://ryanfait.com/sticky-footer/
I have a sidebar div to the left of my main content area and a footer below. How do I get my side bar div and main content div to both extend to my footer without filling it with content?
I think you are looking for the min-height CSS attribute. I don't know exactly how the markup is structured, but applying it to both divs (left and main), or a surrounding container should do it.
If you need it to work in older versions of IE, you should check out one of the CSS hacks like: http://www.dustindiaz.com/min-height-fast-hack/
Is this what you're looking for?
<div style="width:80%; margin:0 10% 0 10%">
<div style="background:red; width:20%; float:left">side</div>
<div style="background:blue; width:80%;float:right">main</div>
<div style="background:green; clear:both;">footer</div>
</div>