Hello I am a new web developer. I have a simple problem.
I am trying two column site in a div (.container width960px) one is float: left(width:300px) but when another using float: right(width:650px ) . But when I am using float right rightsidebar did not appear in container. Pleasr help me proper use on float: left or right.
.container {
background: none repeat scroll 0 0 #000;
margin: 0 auto;
width: 960px;
}
.leftsidebar {
width: 200px;
float:left
}
.rightsidebar {
float: left;
width: 200px;
color: #fff;
width: 400px;
}
The result you want, is simple. There shouldn't be any problem, check this sample based on yours:
HTML
<div class="container">
<div class="leftsidebar">
Right Sidebar
</div>
<div class="rightsidebar">
Right Sidebar
</div>
<div class="clear"></div>
</div>
CSS
.container {
background: none repeat scroll 0 0 #000;
margin: 0 auto;
width: 960px;
}
.leftsidebar {
width: 200px;
float: left;
background: yellow;
}
.rightsidebar {
float: left;
width: 760px;
background: green;
}
.clear {
clear: both;
}
jsFiddle Demo.
Related
<section id="main-content">
<div class="language-box html">HTML</div>
<div class="language-box javascript">JAVACRIPT</div>
<div class="language-box css">CSS</div>
<div class="language-box php">PHP</div>
<div class="clear"></div>
</section>
I'm trying to make this 4 box's become centralized and side by side.
I'm using this code, but it's not working as i hope:
#main-content {
margin: 0 auto;
}
.language-box {
width: 279px;
height: 400px;
background-color: white;
float: left;
margin: 0 auto;
}
http://i.imgur.com/V2DPlRa.png
You could remove float, display items as inline-block and set text-align: center to the container.
#main-content {
margin: 0 auto;
text-align: center;
width: 100%;
}
.language-box {
width: 80px;
border: 1px solid #000000;
height: 400px;
background-color: white;
/* float: left;
margin: 0 auto; */
display: inline-block;
}
Fiddle: http://jsfiddle.net/9k2ae5vv/
You need to clear after float elements:
#main-content {overflow: hidden}
you must set width for your wrapper, and everything will be fine.
#main-content {
margin: 0 auto;
width: calc(4 * 279px);
}
look working example
I created a jsfiddle example here
http://jsfiddle.net/Lmazqt4q/5/
But when I try to fix the right column, it doesn't stay a fixed width. I know that with the same code if I put it on the left side and fix that, it'll stay fixed fine. Been awhile since I've played with css so trying to refresh and have gotten frustrated with this. Any help would be appreciated. Thanks!
If you need the code, here it is
HTML:
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
<div id="topBar">
Top bar
</div>
<div id="leftColumn" class="column">
Content
</div>
<div id="rightColumn" class="column">
Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
CSS:
body {
background: none repeat scroll 0 0 #CCCCCC;
font: 13px/17px Arial,Helvetica,Verdana,sans-serif;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
div#header {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
height: 70px;
margin: 0 auto;
width: 90%;
text-align: center;
}
div#wrapper {
height: 100%;
}
div#content {
background: none repeat scroll 0 0 #B4C4EA;
height: 87%;
margin: 0 auto;
overflow: auto;
position: relative;
width: 90%;
}
div#footer {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
height: 50px;
margin: 0 auto;
padding: 20px 0 0;
position: relative;
width: 90%;
text-align: center;
}
div#topBar {
background: none repeat scroll 0 0 #444;
color: #FFFFFF;
height: 40px;
text-align: center;
width: 100%;
}
.column {
display: inline-block;
float: left;
height: 200px;
}
div#leftColumn {
border-right: 1px solid #000000;
width: 83.88%;
}
div#rightColumn {
border-left: 1px solid #000000;
width: 1.25em;
}
You could float the right column and give the overflow:hidden property to the left. If you have the right column come before the left in your markup, the left column will fill the remaining width.
HTML
<div id="topBar">Top bar</div>
<div id="rightColumn" class="column">Content</div>
<div id="leftColumn" class="column">Content</div>
CSS
.column {
float: right;
}
div#rightColumn {
width:50px;
}
div#leftColumn {
float:none;
overflow:hidden;
}
JSFiddle
Or, display your columns as table cells, this way would require you to have a container for your columns:
HTML
<div class="columns">
<div id="leftColumn" class="column">Content</div>
<div id="rightColumn" class="column">Content</div>
</div>
CSS
.columns {
display:table;
width:100%
}
.column {
display:table-cell;
}
div#rightColumn {
width:50px;
}
JSFiddle
I have a three column layoyut - left, middle and right.
<div id="content-area" class="clearfix">
<div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>
<div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>
<div id="content-right">
<f:format.raw>{navigator}</f:format.raw>
<f:format.raw>{content_right}</f:format.raw>
</div>
</div>
with this CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-area {
padding: 10px 0;
margin: 5px auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
width: 600px;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
text-align: left;
}
Left is 180px, middle is 600px and right is 180px, making it a 960px layout, like this.
http://jsfiddle.net/kxuW6/
For the most part, this works as intendend, but I want the middle column to have a somewhat flexible width according to the content in the right column.
It I put a image in the right column that have a width of 360px, the middle column will be 420px wide.
My problem is that an image with a width more than 180px, fx. 360px, will break the floating of the columns, as per this fiddle
http://jsfiddle.net/5hNy5/
I want it to it to be like this fiddle, but without the fixed width in the middle column.
http://jsfiddle.net/Eqwat/
Use display: table-cell instead of floats...
If you are supporting the more mordern browsers, you can try:
#content-area {
width: 960px;
padding: 10px 0;
margin: 5px auto;
display: table;
border: 1px dashed blue;
}
#content-left {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
}
#content-middle {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-middle p {
margin-top: 10px;
}
#content-right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
text-align: left;
}
The width value for a table-cell acts like a mininum value, so the left and right columns will expand if you insert an image into eithe one and the middle column will adjust to take up the remaining width.
See demo at: http://jsfiddle.net/audetwebdesign/V7YNF/
The shortest form that should solve the above:
HTML:
<div class="area">
<div class="side"></div>
<div>Some content here</div>
<div class="side"></div>
</div>
CSS:
<!-- language: CSS -->
.area {
width: 100%;
display: table;
}
.area > *{
display:table-cell;
}
.side {
width: 100px;
background-color:gray;
}
See this fiddle.
If you are fine with shuffling the source order of the columns, you can relegate #content-middle to the bottom and give it display: block and overflow: hidden.
Markup:
<div id='all-wrapper'>
<div id="content-area" class="clearfix">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-middle"></div>
</div>
</div>
CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
display: block;
overflow: hidden;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
}
Now the middle-column will take up the available space when the right-column's width changes.
Demo: http://dabblet.com/gist/7200659
Required reading: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
I can't make two areas of content float beside each other without disrupting my container. I have the first area cued to float:left but when I cue float:right to content area 2 my container doesn't work anymore.
The object does float right but the container disappears.
Here is my website http://aasdsafasdf.weebly.com/ (I'm in the very early stages)
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}
#content {
float: left;
height: auto;
width: 710px;
}
#content2 {
float: right;
height: auto;
width: 350px;
}
There are some markup errors on your page (notice the </script> tag after one of your links to a stylesheet?) but just set your container to hide overflow:
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
overflow:hidden
}
#content2 {
height: auto;
width: 350px;
float:right;
}
That should fix the issue. But make sure you fix up your code... it has a variety of issues now: http://validator.w3.org/check?uri=http%3A%2F%2Faasdsafasdf.weebly.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}
#content {
float: left;
height: auto;
width: 710px;
display: block;
}
#content2 {
float: left;
height: auto;
width: 350px;
display: block;
}
You want both content div's to float left and be display:block;, then they will push up against the one to its left.
I'm using this code...
<div id="app">
<div id="app-actionbar">
topbar
</div>
<div id="app-userinfo">
sidebar
</div>
<div id="app-content">
content
</div>
</div>
/** Styling **/
#app {
border:1px solid #666;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
margin-top:10px;
}
#app-content {
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 725px;
display: inline;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
}
However, it's not working like I want it to.
I want to add a border around it, but its not working (and its moving the content down).
You need to clear the floated elements in your #app . Try adding overflow:hidden; or overflow:auto; to #app. That will get the border to wrap you entire DIV.
Here's a live jsfiddle link of your above snippets with the overflow:hidden assigned:
http://jsfiddle.net/AhZAU/
The spacing at the top, "(and its moving the content down)", is being created by the margin-top:10px on the #app-actionbar. Remove the margin and the space will no longer be present: http://jsfiddle.net/AhZAU/1/
The QuirksMode Way©:
#app {
border:1px solid #666;
overflow: auto;
width: 100%;
}
http://jsfiddle.net/CePt6/
From the article:
If you want to add, say, a border
around all floats (ie. a border around
the container)...
NOTE
As far as the gap at the top, you can eliminate that by removing margin-top: 10px; from #app-actionbar.
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
}
http://jsfiddle.net/CePt6/2/
EDIT
Now, if you mean the content block is moving down, make the width of the #app the same width as your #app-actionbar:
#app {
border:1px solid #666;
overflow: auto;
width: 900px;
}
http://jsfiddle.net/CePt6/3/
Just for giggles, tried that but with some layout changes. Check if it helps. (demo here)
<div id="app">
<div id="app-actionbar">
topbar
</div>
<div id="app-userinfo">
sidebar
</div>
<div id="app-content">
content
</div>
</div>
CSS:
#app {
border:1px solid #666;
clear:both;
position:absolute;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
margin-top:0px;
}
#app-content {
float: left;
color: #333;
background: red;
height: 350px;
width: 725px;
display: inline;
left:200px;
top:75px;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
top:65px;
}
this should do the trick. jsfiddle.net demo
#app {
border:1px solid #666;
height: auto;
overflow: auto;
width: 900px;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
}
#app-content {
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 725px;
display: inline;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
clear: left;
}
Here's what you can do:
Add the following lines to your #app div like this:
width:900px;
min-height: 300px;
overflow:auto;
The above is meant to auto-expand the outer div as the inner contents increase in length.
This however will be a restriction on older versions of IE since they did not have the min-height property.