What I did was to use margin:20% on the main div... But I don't think it is the best way:
CSS:
.wrapper {
background-color:#F0C;
float:left;
width:1000px;
height:400px;
margin-left:20%;
alignment-adjust:central;
position:absolute;
}
.maincontent {
background-color:#3F6;
float:left;
width:50%;
margin-left:30%;
}
.leftSidebar {
background-color:#C63;
float:left;
width:30%;
margin-left:-80%;
}
.rightsidebar {
background-color:#66F;
float:left;
width:20%;
}
HTML
<div class="wrapper">
<div class="maincontent">
<!-- main content goes here -->
</div>
<div class="leftSidebar">
<!-- left sidebar content goes here -->
</div>
<div class="rightsidebar">
<!-- right sidebar content goes here -->
</div>
</div>
How can I position the .wrapper to the center? Is there an easy way?
Also, what is the difference between using the left/right properties and margin-left/margin-right?
.wrapper {
width:1000px;
position:absolute;
left:50%;
margin-left:-500px;
}
My answer would be: skip the absolute positioning, and use margin:0 auto; to center your content (no margin on top and bottom, and automatic margin left and right).
.wrapper
{
background-color:#F0C;
width:1000px;
height:400px;
margin:0 auto;
}
Related
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
I have a header that is divided into a few parts.
First, it's divided into left, and right.
The right part is then divided into stacked top and bottom, or at least that's what I'm trying to do.
However, they won't show up (unless there's text or something.)
HTML
<div id="header">
<div id="header_left">
<div id="header_title">
<p id="t1">TEXT</p>
<p id="t2">TEXT</p>
<p id="t3">TEXT</p>
</div>
</div>
<div id="header_right">
<div id="right_top">x</div>
<div id="right_bottom">x</div>
</div>
</div>
CSS
#header_right {
height:100%;
float:right;
}
#right_top {
height:140px;
width:100%;
display:block;
background-color:#FF0000;
}
#right_bottom {
height:60px;
width:100%;
display:block;
background-color:#000;
}
You have to set position:absolute for the empty div's to display
position:absolute;
You should to add this:
#header_right {
height:100%;
float:left; /*changed from right*/
}
/*added new class*/
#header_left{
float: left;
width: 97%;
}
Im working on a page.. where Margin 0 auto not work in div with display:table cell
here's my codeCSS Styles
<style>
html,body{
height:100%;
width:100%;
}
.wrapper{
background-color:#999;
height:500px;
}
.tableContent{
display:table;
height:500px;
}
.tableContentRow{
display:table-row;
}
.tableContentCell{
display:table-cell;
vertical-align:middle;
height:500px;
}
.loginBox{
height:100px;
background-color:#FFF;
width:250px;
margin:0 auto;
}
</style>
Here's the HTML
<div class="wrapper">
<div class="tableContent">
<div class="tableContentRow">
<div class="tableContentCell">
<div class="loginBox">
<!-- More contents Go HEre -->
</div>
</div>
</div>
</div>
</div>
The loginBox div does not position to the center of the tableContentCell divPlease help...
Set a specific width on the .tableContentCell div and you'll be ok.
Fiddle
The table itself is not centered.
Check this fiddle.
.tableContent{
margin:0 auto;
}
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}
I've been trying to create a page with a container that contains the content, and a right sidebar. Whenever I enter content into the content into the sidebar or content div, it continues into the footer, and the sidebar sometimes moves to the left side of the page.
I feel like I have a Height issue somewhere. I want the container section to be as big as the content/sidebar takes up, but it seems to be overflowing into the footer rather than expanding the container.
Here is an exampe of what my HTML looks like:
<body>
<div class="MainContainer">
<div class="RightSideBar">
Sidebar Text
</div>
<div class=MainContent>
Content Text
</div>
</div>
<footer>
Footer Text
</footer>
</body
And CSS
body{
width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
}
footer{
height:20%;
width:60%;
margin-left:auto;
margin-right:auto;
color:white;
}
.RightSideBar{
width:20%;
height:auto;
float:right;
}
.MainContent{
width:80%;
height: auto;
}
Try setting the overflow: hidden; on the .MainContainer
Don't use float, if you know what sizes the elements are going to be, use display:inline-block instead.
Html:
<main>
<div class="content col">articles..</div>
<aside class="col">sidebar..</aside>
</main>
Css:
main {
font-size:0;
}
.col {
font-size:16px;
display:inline-block;
}
.content {
width:80%;
}
aside {
width:20%;
}