I'm trying to make four columns that are centered on the frontpage. I would like it to look like this example:
http://www.clutterpad.com/
My code looks like this:
#bottom-container {width:100%;height:250px;position:relative;}
#bottom-mid {background-color:white;}
#bottom-left, #bottom-mid, #bottom-right {height:250px;}
#bottom-left, #bottom-right {width:50%;float:left;}
#bottom-left {background-color:white;position:absolute;top:0px;left:0px;}
#bottom-right {background-color:white;position:absolute;top:0px;left:50%;}
#bottom-mid {position:relative;margin:0px auto; width:1000px;z-index:2;}
#column-container {width:100%; margin:20px auto;}
.column {width:200px;float:left;font-size:10pt;font-family:Arial;margin:20px 10px;}
But it's not working out. How should I code it to look like the example I mentioned before?
It would be good if you could include the HTML, but I would approach the problem like this:
<div id="fourcolumns">
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>
CSS:
#fourcolumns {
width: 100%;
overflow: hidden;
}
#fourcolumns div {
width: 25%;
float: left;
}
If you are adding margins between the columns, you will fall victim to the IE6 double margin float bug, which you can fix by including #fourcolumns div { display: inline; }
<div id="fourcolumns">
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>
CSS:
#fourcolumns {
margin: 0 auto;
width: 50%;
overflow: hidden;
}
#fourcolumns div {
width: 25%;
float: left;
}
Related
I'm struggling to understand divs.
I want to have the 'nav' panel expand vertically as required. The second issue I have is that I can't seem to get padding to work. Any changes I make tend to end up with the 'section' div drop below the 'nav' div.
Please see below jsfiddle and code.
Thanks in advance.
https://jsfiddle.net/s59cwy9s/
<div id="container">
<div id="nav">
test
</div>
<div id="section">
test
<br><br><br><br>
test
<br><br><br><br>
test
</div>
</div>
#container
{
width: 1156px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px rgb(0,0,0);
position: relative;
background-color: transparent;
height: auto;
}
#header
{
background-color:black;
color:white;
text-align: center;
padding:5px;
}
#nav
{
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
float:left;
padding: 15px;
display: inline-block;
height: auto;
}
#section
{
/*float: none;*/
padding: 10px;
display: block;
/*position: absolute;*/
/*overflow: auto;*/
background-color: white;
width: auto;
height: auto;
}
This may be due to the fact that your name bar doesn't span the height of the webpage completely. Try something like height :100% for the navbar. It might do the trick.
Here is some help :
https://jsfiddle.net/6ubhyL5k/
Some advices :
Take time to really understand how the page flow works (float : left/right) so you will then understand how padding and margin work when you have floating div
Use what you really know and don't improvise :)
Don't use br to make spaces between blocks (margin and padding are what you should use)
Take a look at how bootstrap works and never forget the responsive design
First I will recommend is using box-sizing attribute
It contains any type of padding or borders within the container's width and height. Find more about it Here. So i suggest:
*
{
box-sizing:border-box;
/* Use browser prefixes if u want support for other browsers */
}
Second is add a class to the container which contains elements wit float css attribute like clearfix and add this code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
or you can just create a div after the container containing elements with float css attribute and clear it.
<div class='clear'></div>
.class
{
clear:both;
}
Using float as much as it is useful brings about a problem in layout if not properly used. https://css-tricks.com/all-about-floats/
My Solution:
html,body {height:auto; width:100%; background:red; }
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; }
#container
{
min-width:800px;
height:auto;
margin:0 auto;
width:100%;
}
#nav
{
float:left;
width:30%;
padding: 15px;
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
background:white;
}
#section
{
float:left;
width:70%;
padding:0 100px;
background:yellow;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Hope It Helps You. Though i recommend researching more on layouts since there's other layout which will give you less problem than floats.
Try
#section{
clear:both;
}
JSfiddle
clear:both allows floated divs to stop continuing on the same line with the other floated ones, and drop below.
Update: https://jsfiddle.net/s59cwy9s/2/
You could fix your issue by giving a margin-right to the #nav
I'm sure I'm missing something here... so I've dumbed down my question as much as I can so it makes sense. (I'm somewhat a novice at using CSS properly).
To clarify, I made a graphic that shows what I'm trying to accomplish, but I can't seem to get it right and I've been trying all day. I need a 100% wide header div, content in the middle, and a 100% wide footer div. My footer div keeps going up behind my content area. CANT figure it out.
<div id="HEADER"></div>
<div id="CONTENT">
<div id="contentwrap">
<div id="top-left-photo"></div>
<div id="top-right-date"></div>
</div>
</div>
<div id="FOOTER"></div>
I've also included a fiddle:
http://jsfiddle.net/b9kah2wx/
Thank you!!
I've made some changes to your jsfiddle http://jsfiddle.net/b9kah2wx/2/
#HEADER {
height:300;
width: 100%;
}
#CONTENT {
background-color: #C0F;
height:auto;
width: 100%;
}
#FOOTER {
background-color: #C00;
height:500px;
width: 100%;
}
#contentwrap {
width: 66%;
height: auto;
margin: 0 auto;
background-color:#0ff;
}
#top-left-photo {
float:left;
height: 180px;
width: 40%;
margin-right: 15px;
background-color: #555555;
font-family:"Dirty";
}
#top-right-date {
float:left;
height: 180px;
width: 40%;
margin-right: 0px;
background-color: #555555;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
You'll notice I changed the fixed width to percentages just so I could work with it in the jsfiddle but the basic idea is there.
You also need to clear your float:ed elements so the parent div#contentwrap height problem will get fixed. I've added this code for you.
and this is your HTML
<div id="HEADER"><h1>header</h1></div>
<div id="CONTENT">
<div id="contentwrap">
<div id="top-left-photo">photo</div>
<div id="top-right-date"> date</div>
<div class="clearfix"></div>
</div>
</div>
<div id="FOOTER"></div>
Do this: Add the below code to your css file
* {
margin: 0 auto; /* Centers everything with a given with except when floated or altered with margin and position properties */
}
Note: It's important that you clear your floats as Paulie_D mentioned
Ok, I know this question has been here at least hundred of times but this positioning is driving me crazy - can someone help me?
I have a portlet page (its basically html) with a table and a div tag. I would like to position them next to each other (table on the left, div on the right). Here are parts of my html:
<div id="page>
<table id="logtable">
...
</table>
<div id="divMessage>
...
</div>
</div>
...and CSS:
#page {
width: 1200px;
margin: 0px auto -1px auto;
padding: 15px;
}
#logtable {
width: 800px;
float: left;
}
#divMessage {
width: 350px;
position:relative;
right:-5px;
top: -20px;
}
I have tried various positions - absolute, fixed, float etc, but I cant seem to get it right... Thanks for any help!
You could use...
float: left;
on your div 'logtable'
I would advise using DIVs to do you alignment of content so wrap the table in a DIV.
I also prefer to use inline-block over float left and gives more predictable results.
so...
<div id="page">
<div id="divTable" class="InsideContent">
<table id="logtable">
Left
</table>
</div>
<div id="divMessage" class="InsideContent">
Right
</div>
</div>
#page {
width: 1200px;
margin: 0px auto -1px auto;
padding: 15px;
}
.InsideContent{
display:inline-block;
}
}
#divTable {
width: 800px;
}
#divMessage {
width: 350px;
}
Code needs tidying up but you get the idea...
JSFiddle http://jsfiddle.net/3N53d/
Use float:left on the element which should be on the left and float:right on the right one. Keep in mind that if the sum of their widths exceeds the available space in the parent element they will be split into two lines anyway.
Here you go , no need of right:-5px;
#divMessage {
width: 350px;
position: relative;
top: -20px;
float: left;
}
I see that you forgot closing the quotes at <div id="page>, this might cause some problems, but basically you have to use:
float: left;
for the last div.
I have created this JSFiddle for you to see if this fits your needs.
You can just use display: inline-* to put them side by side in a row
#logtable {
width: 800px;
display: inline-table;
}
#divMessage {
width: 350px;
display: inline-block;
}
JSFiddle
Just try this.
Fiddle
CSS
#logtable {
width: 500px;
float: left;
background:red;
}
#divMessage {
width: 350px;
position:relative;
float:left;
background:blue;
}
try this:
<table id="logtable">
<tr>
<td>
table area
</td>
</tr>
</table>
<div id="divMessage">
div area
</div>
</div>
#page {
width: 800px;
margin: 0px auto -1px auto;
padding: 15px;
border:red solid 1px;
height:170px;
}
#logtable {
width: 400px;
height:150px;
float: left;
border: blue dashed 1px;
}
#divMessage {
width: 350px;
height:150px;
right:-5px;
top: -20px;
border: green dashed 1px;
float:right;
}
here is a smaple
In simple we can do like this:
table#logtable, div.divMessage{
display:inline-block;
}
Or
table#logtable, div.divMessage{
float:left;
width:50%;
}
So I have two divs that are overlapping and I don't know what caused it to.
Here's the URL:
http://dennis-reviews.netne.net/
As a side problem:
How can I center the navigation list at the top?
change #container_info to this:
#container_info {
height: 185px;
width: 1024px;
margin: 0px auto;
overflow: hidden;
}
and to center add this css rule:
#navigation ul {
width: 1024px;
margin:0px auto;
}
Use following property in CSS for the footer div clear: left;
Your class .info need to have max-height:180px;in the css
If you add clear: left; to the #footer then that will fix it.
#footer {
height: 80px;
width: 100%;
background: #1A1A1A;
clear: left;
}
If you're unsure how this works there's a good article on CSS-Tricks that explains it all.
I have 2 divs and I want to align them in the same line. The html code is:
<div class="box">
<div class="boxleft"> </div>
<div class="boxright"> </div>
</div>
I tried 'float: left;' and 'float: right;' but the background is going crazy, it apears just on ~30px of the height. I tried to put a height('till then I didn't use height in CSS). It didnt' work. I tried 'display: inline-block' too, but without succes.
Thanks.
CSS:
.box {
width: 956px;
margin-left: auto;
margin-right: auto;
background: #584231;}
.boxleft {
width: 706px;
margin-right: auto;
border-right: 2px solid black;}
.boxright {
width: 250px;
margin-left: auto;
float: right;}
Float: left should do the trick depending on the width of the parent boxand the width of boxleft and boxright. If the parent box has width: 500px; and boxleft and boxrightboth have width: 250px; float:left;. You should be fine.
Have a look at the css properties float:left and clear:both.
http://www.w3schools.com/css/css_float.asp
I put some colors on each background to make it clear, you're maybe lacking a width and height for each element..
.boxleft , .boxright {
float : left;
width : 200px;
height : 100px;
margin : 10px;
}
.boxleft {
background : yellow;
}
.boxright {
background : blue;
}
http://jsfiddle.net/n9mHX/
On most modern browsers nowadays display: table-cell is the better alternative to floating.
You may use
display:inline-block;
or
float
or as per latest browser out you may use
display: table-cell
or you may use
clear: both
If you're not a "CSS guy", look at http://twitter.github.io/bootstrap/. With bootstrap, put two div on the same line is done this way :
<div class="row-fluid box">
<div class="span6 boxleft"></div>
<div class="span6 boxright"></div>
</div>
You need to clear the floats via clearfix on the parent container.
.box {
width: 956px;
background: #584231;
}
/* clearfix */
.box:after {
content: '';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.boxleft {
width: 704px;
border-right: 2px solid black;
float: left;
}
.boxright {
width: 250px;
float: right;
}
The border is adding 2px to your divs width. That's why I specified it with 704px.
Using inline-block as display for the left and right box should work too.