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...
Related
So I got a question about DIVs. I want 2 rows with 3 divs in each, centered. But the problem is if I do clear: left; all 6 will be next o eachother. Here is how my code looks like right now and I hope you can help me out.
CSS:
.row1 {
position: absolute;
height: 270px;
}
.row2 {
position: absolute;
height: 270px;
}
.columns {
width: 190px;
height: 274;
border-top: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 15px;
}
Here is my HTML:
<div id="row1">
<div class="columns"> </div>
<div class="columns"> </div>
<div class="columns"> </div>
</div>
<div id="row2">
<div class="columns"> </div>
<div class="columns"> </div>
<div class="columns"> </div>
</div>
this is one div:
head text
paragraph text
They are all floating next to each other. You should add a clear row where you want to seperate them. We usually call it clearfix.
<style>
.clearfix{ clear:both; }
</style>
</div>
<div class="clearfix"></div>
<div id="row2">
Try to use "display: inline-block" instead of float and remove "position: absolute". Add closing divs for the columns. And change css for the rows to refer to id, not class.
CSS:
.columns {
display: inline-block;
width: 190px;
border-top: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
}
#row1 {
height: 270px;
}
#row2 {
height: 270px;
}
HTML:
<div id="row1">
<div class="columns">1.1</div>
<div class="columns">1.2</div>
<div class="columns">1.3</div>
</div>
<div id="row2">
<div class="columns">2.1</div>
<div class="columns">2.2</div>
<div class="columns">2.3</div>
</div>
JsFiddle: http://jsfiddle.net/a5vKH/1/
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,
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
I'm struggling with an IE6 float issue. (I know IE6 sucks but my huge company uses it..) I've created a simple, header, body, footer layout, with a content area and sidebar within the body. Essentially a common blog layout.
I've had no problem achieving this in IE6 but within the content area I've tried to create a featured area div across the top, then below it two divs side by side. It looks fine in modern browsers but in IE6 it puts the 2nd div below the 1st. Like the divs are too big for the container so it pushes the 2nd. But that shouldn't be the issue since they are both small enough (width, padding, margin) to fit..
And here's my code:
HTML
<body>
<div id="page-wrap">
<div id="header">
</div>
<div id="content">
<div id="feature">
</div>
<div class="clear"></div>
<div id="#1">
</div>
<div id="#2">
</div>
</div><!--Content End-->
<div id="sidebar">
</div>
<div class="clear"></div>
<div id="footer">
</div>
</div><!--Body Content End-->
</div><!--Page Wrap End-->
</body>
CSS
#page-wrap {
width: 960px;
margin: 0 auto;
background-color: #fff;
}
#header {
width: 954px;
height: 50px;
padding: 10px 0;
margin: 0 3px 2px 3px;
border-bottom: #7E7871 dotted 3px;
}
#content {
float: left;
width: 650px;
margin: 0;
padding: 15px 5px 0 15px;
}
#feature {
width: 650px;
margin: 0;
}
#content #1 {
border-right: thin solid #CCC;
width: 305px;
margin: 0;
padding: 0;
float: left;
}
#content #2 {
width: 305px;
margin: 0;
padding: 0;
float: right;
}
#sidebar {
float: right;
width: 250px;
padding: 0 10px 20px 10px;
margin: 0;
background: url(../_images/bg_aside.gif) repeat-y;
}
Since you haven't provided much detail as to how your HTML/CSS doesn't work in your browser, the only error I can find in your code is you have a stray </div>:
<body>
<div id="page-wrap">
<div id="header">
</div>
<div id="content">
<div id="feature">
</div>
</div>
<div class="clear"></div>
<div id="programs">
</div>
<div id="discounts">
</div>
<div class="clear"></div>
--> </div><!-- THIS ONE! -->
<div id="sidebar">
</div>
<div class="clear"></div>
<div id="footer">
</div>
</div><!-- Body content end -->
</div><!-- Page wrap end -->
</body>
One of the reasons it will dip below is due to content being larger than the div.
However, your css does not match the provided HTML. It's hard to debug some of this without the actual content.
Assuming #2 and #1 are #discounts and #programs, I suggest adding an overflow: scroll; to see how it changes.
Hi Im trying to create the following structure in div's, but I just need some help getting startet with the css.
The width needs to be 100%
<style type="text/css">
.clear{ clear: both; }
.top{ width: 100%; }
.col{ width: 25%; float: left; }
.col, .top{ text-align: center; }
</style>
<div class="main">
<div class="top clear">Menu</div>
<div class="col">Column1</div>
<div class="col">Column2</div>
<div class="col">Column3</div>
<div class="col">Column4</div>
<div class="clear"></div>
</div>
This will not work if you add border/padding/margin to the columns, use absolue width values if you want to use that.
If you want four floated columns to fill 100% width of any element you may see a slight misalignment at the end of the last column in various browsers. It's easier to get exact alignment (say, with borders) if you work to the width of a container. For example, to reproduce your visual (complete with borders) use the css:
#container {
width: 400px;
text-align: center;
}
#menu {border: 1px solid black;}
#cols div {
float:left;
border-right: 1px solid black;
border-bottom: 1px solid black;
width:99px;
}
#cols div:first-child {
border-left: 1px solid black;
width:98px;
With the html:
<div id="container">
<div id="menu">Menu</div>
<div id="cols">
<div>column 1</div>
<div>column 2</div>
<div>column 3</div>
<div>column 4</div>
</div>
</div>
And (as Lekensteyn suggests) make sure any footer or element after the div columns has a clear rule.
You can test this examples here:
http://cssdesk.com/