What would be a proper way to create a 2 column (Sidebar - Main) full width page with Bootstrap. I found few examples but mostly for width.
My attempt was to simply override:
html, body {
margin: 0px;
width: 100%;
height: 100%;
}
sidebar {
width: 200px;
height: 100%;
}
However this creates concern for smaller screens. What would be a proper way to implement 2 column page layout. I'm trying to put make a layout for my administration panel.
You can just use the Bootstrap fluid grid? It will create a 2 column flexible layout. You can then use Bootstrap responsive to make that collapse down in one column if you want to.
Code from the Bootstrap website to do it.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
And a fiddle: http://jsfiddle.net/MgcDU/3581/
Instead of hardcoding the sidebar to 200 px, why not set it in percentage (20%). This way, even if the user zooms in/out of the page on smaller/bigger screens, the sidebar will always remain consistent.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
see here http://twitter.github.io/bootstrap/scaffolding.html
The thing to do is use media queries.
Float the sidebar in large screens, but in small screens do not, just let it line up under your content.
I managed to do that but I still have border issue : the border of .lefty and .content is above the footer, don't know why, I solved your problem, would you solve mine ; )
HTML :
<div class="container">
<div class="row header">
<div class="col-xs-12">col-xs-12</div>
</div> <!-- End of header -->
<div class="row content">
<div class="col-xs-3 lefty">lefty</div>
<div class="col-xs-9 content">content</div>
</div> <!-- End of content -->
<div class="row footer">
<div class="col-xs-12">col-xs-12</div>
</div> <!-- End of footer -->
CSS :
html,body{
height:100%;
min-height:100%;
width: 100%;
min-width: 100%;
margin: 0;
padding:0;
}
.container {
height:100%;
width: 100%;
min-width: 100%;
margin:0;
padding:0;
}
.full-height{
width:100%;
height:100%;
min-height:100%;
margin:0;
padding:0;
}
.header{
background-color: #333;
border: 1px solid white;
height: 10%;
color: white;
margin:0;
padding:0;
}
.lefty{
background-color: #333;
border: 1px solid white;
height: 80%;
color: white;
margin:0;
padding:0;
}
.content{
background-color: #333;
border: 1px solid white;
height: 80%;
color: white;
margin:0;
padding:0;
}
.footer{
background-color: #333;
border: 1px solid white;
height: 10%;
color: white;
margin:0;
padding:0;
}
Best,
Related
I'm trying to recreate: http://jsfiddle.net/MGRdP/6/
html, body{
height:100%;
}
.table {
width: 100%;
display: table;
height:100%;
}
.cell {
border: 2px solid black;
vertical-align: middle;
display: table-cell;
height:100%;
}
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
using Neat but my divs are not expanding to 100% of the viewport height. Using inspector, I cannot find any discrepancies. Obviously something is off here.
Can someone provide correct markup for neat that allows me to achieve the as the fiddle?
If you want two divs side by side (like the Fiddle), just make each one width:50% and float:left
html, body{
height:100%;
}
.table {
width: 50%;
display: table;
height:100%;
float:left;
}
.cell {
border: 2px solid black;
vertical-align: middle;
display: table-cell;
height:100%;
}
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
.table {
width: 50%;
display: table;
height:100%;
float:left;
}
this css make two div to stay side by side.
You can also use
display:inline-block;
vertical-align:top;
width:49%;
to make side by side layout;
To center content use margin:0 auto for child
and two make height as view port use-
height:100vh
jsfiddle link
I'm trying to recreate a web page with a three column design like the page below, but i'm having some trouble. I've tried using nested divs, but the code does not seem to be working for some reason. Here's a snippet of the html and css code
<body>
<div id="container">
<header>
<h1>The CIS 4004 Newsletter</h1>
</header>
<div id="wrapper" role="main">
<nav>
<ul>
<li>Test link; </li>
</ul>
</nav>
<article>
<div class="inner">
<h2>Test header</h2>
<p>Just some test text.
</p>
</div>
</article>
</div>
</div>
</body>
css code is here
#wrapper {
border: 1px solid black;
position:relative;
width:960px;
margin:0 auto;
overflow:hidden;
}
nav{
width: 150px;
float: left;
border: 2px solid black;
position:relative;
}
article.inner {
margin:10px;
padding:20px:
border: 2px solid red;
}
Here's an image of the web page
http://jsfiddle.net/2yjhp/
The simple template
<div class="wrapper">
<div class="left">Left Content</div>
<div class="middle">Middle Content</div>
<div class="right">Right Content</div>
</div>
---CSS---
div.wrapper {width: 1000px; margin: 0px auto;}
div.left {width: 250px; float: left;}
div.middle{float: left;}
div.right{width: 250px; float: left;}
Whether your designing a three column layout or a two column layout the key thing to remember is to floating all the columns in the same direction (left) and adjusting there width accordingly. There is no need to use nested div.
eg:
cloumnone{float: left;
width: 33%;}
similary for other two cloumns...
I would like to put the footer at the bottom of the browser window and fill the empty part with the container when necessary(. This is my structure:
<header>
<div class='container'>
....
</div>
</header>
<div id='wrap'>
<div class='container'>
<div class='white-background'>
<div class='col-xs-12 col-sm-5 leftcontent'>[%leftcontent%]</div>
<div class='col-xs-12 col-sm-7 maincontent'>[%maincontent%]</div>
</div>
</div>
</div>
<footer>
<div class='container'>
<div style='text-align: center; padding-bottom: 20px;'><h3>[%copyright%]</h3></div>
</div>
</footer>
And this is the css:
#wrap {
min-height: 100%;
background-image:url('bk.gif');
background-color: #2c3e50;
}
.white-background{
width:100%;
height:100%;
display:block;
overflow:auto;
background-color: #fff!important;
}
footer{
background-color: #f2f2f2;
text-align:center;
position: relative;
margin-top: -50px;
height: 50px;
clear:both;
padding-top:20px;
}
I have done some tries and took a look to other answers, but without success...
Try add first stycky footer solution
http://ryanfait.com/html5-sticky-footer/
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.
Any idea how to achieve the layout indicated in the image below with pure CSS, if the order of the divs in the markup must be as follows?
NOTE - The height of each panel is unknown; wrapper divs may be added to the markup
<body>
<div id="content"></div>
<div id="nav"></div>
<div id="search-results"></div>
</body>
This technique is taken from the question
Make a div display under another using CSS in a totally fluid layout.
It uses CSS table presentation using properties of display: table family to rearrange the presentation order of dom elements.
As said in the above question:
This works in all modern browsers, and IE8 if you're careful. It does
not work in IE6/7.
HTML
<div id="wrapper">
<div id="content-wrapper">
<div id="content">content</div>
</div>
<div id="nav-search-block">
<div id="nav-wrapper">
<div id="nav">nav</div>
</div>
<div id="search-results-wrapper">
<div id="search-results">search-results</div>
</div>
</div>
</div>
CSS
#wrapper {
display: table;
width: 100%;
}
#nav-wrapper,
#search-results-wrapper {
float: left;
width: 50%;
}
#nav,
#search-results {
color: #ffffff;
background: #6699ff;
padding: 10px;
margin: 10px;
}
#nav-search-block {
display: table-row-group;
}
#content-wrapper {
display: table-footer-group;
}
#content {
color: #ffffff;
background: #cc0000;
padding: 10px;
margin: 10px;
}
Demo
Now you can do this in javascript
as like this
Javascript
document.getElementById('one').innerHTML=document.getElementById('content').innerHTML;
CSS
#content{
display:none;
}
#one{
background:red;
padding:10px;
clear:both;
}
#nav{
background:green;
float:left;
width:35%;
}
#search-results{
float:right;
width:65%;
background:yellow;
}
HTML
<body>
<div id="content">Content I m first in html </div>
<div id="nav">navi</div>
<div id="search-results">Search-Results</div>
<div id="one"></div>
</body>
Live Demo