I have a basic two column CSS layout, the CSS looks like
#sidebar {
width:100px;
}
#main {
margin-left:100px;
}
And some sample html
<div id="content">
<div id="sidebar">some sidebar content</div>
<div id="main">some main content</div>
</div>
This works, but it seems repetitive and error prone that the sidebar width needs to match the main's margin-left value. Is there a better way to do this?
You can use the float property on #sidebar:
#sidebar {
width:100px;
float: left;
}
JS Fiddle Example
However, using the above method, if the content of #main causes its height to extend below #sidebar, it will wrap under the sidebar. To avoid this, use the display:table-cell property:
#sidebar, #main {
display: table-cell;
}
JS Fiddle Example
CSS
#sidebar { width:100px; float: left; }
#main { float: right; }
HTML
<div id="content">
<div id="sidebar">my stuff</div>
<div id="main">some main content</div>
<div style="clear:both;"></div>
</div>
I recommend 960.gs or BlueprintCSS for basic-html/css styling.
You may nest sidebar inside main giving main a padding left and sidebar a -ve margin.
#content{
width: 100%;
}
#sidebar, #main{
float: left;
display: block;
}
#sidebar{
width: 100px;
background-color: orange;
margin-left: -100px;
}
#main{
padding-left: 100px;
background-color: green;
width: 100%;
}
<div id="content">
<div id="main">
<div id="sidebar">some sidebar content</div>some main content
</div>
</div>
Here is the working demo.
Related
I have this CSS code:
#main-wrapper {min-height: 300px;}
#main {}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
I tried : clear:both; bottom:0; position:fixed; width:100%; for footer ..
but it works only in short content display .. when a content of a page is too long, then I have to scroll page down over footer ..
please help
see the example code here
HTML
<div id="main-wrapper">
<div id="content"> content of any length</div>
<div id="footer">Footer</div>
</div>
CSS
* {
padding: 0;
margin: 0;
}
#content {
margin-bottom: 30px;/*same as footer height*/
}
#footer{
position: fixed;
bottom:0;
height: 30px;
background: #eee;
width: 100%;
text-align: center;
}
A simpler a neater way to do this:
HTML
<div id="main-wrapper">
<div id="content">Main content</div>
<footer>Footer content</footer>
</div>
CSS
#content {
min-height: 50vh; /*adjust to find the one that suits your content*/
}
I am able to make a two column layout that extends the full length of a container-fluid using absolute positioning. What I want to do is be able to create a two column layout where each column fills up the entire container using row-fluids. However, when I try this my row fluid only take up the height of the text in the div.
Here is an example of what I want to be able to do but where the row-fluid extends to the bottom of the container.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>
But the only way I can get it to work is using absolute positioning which I found an example of on this site.
<div class="container-fluid">
<div id="sidebar">
</div>
<div id="content">
</div>
using this css:
html, body {
height: 100%;
background-color:darkcyan;
}
.container-fluid {
min-height: 100%;
padding:0px;
}
#sidebar, #content {
position: absolute;
top:0;
bottom:0;
}
#sidebar {
left: 0;
width: 15em;
background-color: bisque;
}
#content {
left: 18em;
right:0;
background-color:bisque;
}
Here is a link to a fiddle that works using absolute positioning, but I want to get a similar effect using bootstrap row-fluids and spans. http://jsfiddle.net/PrFeA/
Any ideas?
Percentage values in CSS need an explicit value in the parent element, otherwise they won't work, that means that to get your .span columns to fill the .container-fluid height, you need to set an explicit height value to both .container-fluid and .row-fluid:
html, body {
height: 100%;
background-color:darkcyan;
}
.container-fluid {
height: 100%;
padding:0px;
margin:0px;
}
.row-fluid{
height: 100%;
}
/*Styles for the span columns*/
.row-fluid > div{
background: bisque;
height: 100%;
}
Check out the updated fiddle
I have 3 DIVs: 1. suiteBar, 2. ribbonMain, 3. ribbonSub
I like to display the DIVs in the following way:
DIV1 (suiteBar) : right (without a specific width)
DIV2 (ribbonMain) : left in the same line with DIV1 (width: 100%)
DIV3 (ribbonSub) : under DIV1+DIV2 over the full width from both DIVs
Is that possible? Everytime when I give my DIV2 a width from 100% it makes a 'line Break'... See my example on fiddle and code here:
http://jsfiddle.net/dkHZS/
#topHeader {
display: block;
}
#suiteBar {
background-color: Aqua;
float: right;
display: inline;
}
#ribbon {
background-color: Lime;
float: left;
display: inline;
width: 100%;
}
#ribbonSub {
background-color: Gray;
}
<div id="topHeader">
<div id="suiteBar">suiteBar</div>
<div id="ribbon">ribbonMain
<div id="ribbonSub">ribbonSub</div>
</div>
</div>
Don't float the ribbon div:
#suiteBar {
background-color: Aqua;
float: right;
}
#ribbon {
background-color: Lime;
}
http://jsfiddle.net/dkHZS/4/
Also, when you float an element, it becomes a block element, so setting it to inline won't matter.
Use overflow:hidden on the right div: http://jsfiddle.net/dkHZS/6/
You could do something like this:
<div id="left">
</div>
<div id="right">
</div>
<div id="bottom">
</div>
CSS:
#left{
float:left;
width: 90%;
background: green;
height:20px;
}
#right{
overflow:hidden;
background: blue;
height:20px;
}
#bottom{
width: 100%;
float:left;
background: red;
height:20px;
}
Check this fiddle.
I use position.
This method also works good.
http://jsfiddle.net/hassaan39/NbX7P/
I want to create a page with sidebar and content. The sidebar has fixed width(200px) and content should be
(body_width - sidebar width)
. So created in jQuery and working perfectly.
Edit
Example
But I want to know, is this possible do in CSS Only?
You can do this using display: table; on the containing div and then display: table-cell; on the inner divs. You can then apply a minimum width to the sidebar and the content will take up the rest of the page.
A demo can be found here
Don't let the use of display: table put you off - this isn't using tabular mark up or making your html less semantic. It is merely making your browser treat the div as it would a table cell (which is exactly what you require)
HTML:
<div id="main_wrap">
<div id="sidebar">1</div>
<div id="content">2</div>
</div>
CSS:
#main_wrap {
display: table;
}
#sidebar {
background:red;
min-width: 200px;
display: table-cell;
}
#content {
background:blue;
display: table-cell;
width: 100%;
}
Hey you can get your desired with pure css to give the margin-left:200px; to your #content
CSS
#main_wrap {
border:3px solid green;
}
#sidebar{
background:red;
width: 200px;
float:left;
}
#content{
background:blue;
margin-left:200px;
}
DEMO
You can try use negative margin.
full explanation and example (with demo):
https://shellcreeper.com/responsive-fixed-width-sidebar-why-and-how/
HTML:
<div class="wrapper">
<div class="content">
</div><!-- .content -->
<div class="sidebar">
</div><!-- .sidebar -->
</div><!-- .wrapper -->
CSS:
.wrapper{
margin-right: 200px;
}
.content{
width: 100%;
float: left;
}
.sidebar{
float: right;
width: 200px;
margin-right: -200px;
}
you can do this with css, just remove the width and float from #content.
#content{
background:blue;
}
Check the jsFiddle File
First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/
What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)
The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.
Any help with this would be amazing.
HTML
<div id="container">
<header></header>
<div id="content"></div>
<footer></footer>
</div>
CSS
html, body {
background: #ff3333;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
background: #FFF;
margin: 0 auto;
width: 200px;
min-height:100%;
}
header {
height: 60px;
background: #888;
}
#content {
background: #FFF;
min-height: 200px;
padding-bottom: 60px; /*FOOTER HEIGHT*/
}
footer {
position:absolute;
bottom: 0;
width: 200px;
height: 60px;
background: blue;
}
Here's a solution, courtesy of this question: CSS 100% height with padding/margin
JSFiddle:
http://jsfiddle.net/EPC8c/5/
HTML:
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:
http://jsfiddle.net/EPC8c/3/
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
position: absolute;
width: 100%;
height: 90%;
padding-top: 10%;
padding-bottom: -10%;
}