I am having an issue with div position. My website for reference is;
http://konzine.com
The issue I am having is tough to explain. I have a wrapper div of 1000px that is divided into two sections; one being 350px and the other being 650px. The wrapper is meant to be centered on the page, and have the left and right side correspond to that center. I would need the divs to stretch the width and length of the page to cover the sides in their corresponding color.
Is this possible?
Quick Edit;
I drew a picture to better illustrate my issue:
http://i.stack.imgur.com/UsRJG.jpg
The red line would represent the middle of the page, the entire black outline would be the wrapper div and the inner 2 separate colors are the 2 divs inside. I need them to maintain there center position on the page, but also be able to come out to fill the page.
Your reference site simply uses a centered background image repeated vertically which consists of the two colours.
In it's case the image is 3300px wide and so I had to stretch my browser over both monitors to see it's flaw. If you're ok with assuming that most people won't try and stretch it beyond the width of your image (technically you could make it as large as you like) then that might be the simplest way to do it.
The relevant css from the reference site is
html,body {
background-image:url('images/background.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0px;
}
The rest of the site would just sit in the wrapper as normal.
You can horizontally-center the wrapper by settings its left and right margins to auto. For example, the following would horizontally center a div element with ID as wrapper.
div#wrapper {
margin-left: auto;
margin-right: auto;
}
A complete example:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
div#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border: 1px solid gray;
}
div#left {
float: left;
width: 50%;
background: #bbccdd;
}
div#right {
float: right;
width: 50%;
background: #ddeeff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
foo<br />
foo<br />
foo<br />
foo<br />
</div>
<div id="right">
bar<br />
bar<br />
bar<br />
bar<br />
</div>
</div>
</body>
</html>
Note that when you use float in a div element, the containment of the container div breaks. That is fixed with overflow: hidden. This fix works for modern browsers. In case you want to fix this for IE6 as well, there is a clumsy fix which I've documented here: http://notes.susam.in/2011/06/float-containment.html
Related
Here is a link of what I currently have for my skeleton design.
I'm new to using divs, I always used table but moving towards divs.
But anyways, my question would be...How do I align my content of each div properly.
I want the navigation to be centered along with the main content.
Index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Chomas Tool</title>
<meta charset="windows-1252">
<meta name="Keywords" content="chomas,tool,pinconning,michigan,machine,shop" />
<meta name="Description" content="Chomas Tools- description" />
<!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="images/logo.gif" width="270" height="100" alt="Chomas Tool"></div>
</div><!-- Close header-->
<div id="navbox">Home | About | Projects | Contact</div>
<div id="content">TEST</div>
<div id="footer">Copyright © Chomas Tool</div>
</div><!--Close_wrapper-->
</body>
Main.css
body {
background-color:#b0c4de;
}
p {
background-color:#e0ffff;
}
#wrapper {
height: 100%;
width: 900px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
background-color:grey;
height: 100px;
width: 100%;
}
#logo {
height: 400px;
width: 300px;
float: left;
}
#search {
width: 350px;
height: 400px;
float: right;
}
#search table {
border: 0px solid #000;
padding: 0px;
}
#navbox {
background-color:darkgrey;
width: 100%;
height: 20px;
text-align:center
}
#content {
background-color:lightgrey;
width: 100%;
height: 150px;
}
#footer {
background-color:grey;
width: 100%;
height: 20px;
}
The reason you are getting strange results with that layout is that your #logo div is set to a height of 400px. That is pushing everything else over to the right.
If you remove the height: 400px on the #logo div, and then add this to your styles:
img {vertical-align: bottom;}
everything will appear as you'd expect.
There are a few issues with your code.
The reason your Nav div, Content div and Footer divs are aligning improperly is because you have your #logo div set to a 400px height and floated, but you aren't clearing your float. Unfortunately you can't properly clear that div because you have a height on header of 100px, which is less than your 400px div that is nested inside the header.
For the purpose of teaching you, I'll assume your logo should NOT be 400px high, so I'll set it to be equal to the header height of 100px.
#logo {
height: 100px;
width: 300px;
float: left;
}
While we are on the concept of height, it's acceptable to have a fixed height on your header, as it's a div that shouldn't be super tall or allowed to change (generally speaking there are exceptions). That said... Your content div really shouldn't have a height, I can see you did it here to simulate that you had more content, instead let's just add some content there.
So now we are here: http://jsfiddle.net/dkCZ6/
As you can see the navigation is centered nicely, your content is where it should be as well as the footer.
Let's center the footer to make it nice looking... I added text-align: center;
http://jsfiddle.net/dkCZ6/1/
#footer {
background-color:grey;
width: 100%;
height: 20px;
text-align: center;
}
Noticed that white space that was created between the nav and content area? That's from adding the paragraph around the content stuff. Let's reset all padding and margin by adding * { margin: 0; padding: 0; } to the top of our CSS. (you should use a proper Reset CSS Stylesheet or use a Normalize CSS Sheet. These reset stylesheets help standardize elements across the different browsers, and also gives you a blank slate from which to develope from, without having to worry about weird things occuring, like that white space that we fixed.
Here is the best answer I have:
text-align: center
But base on that code you have then I have done:
**margin: 0 auto**
http://jsfiddle.net/Riskbreaker/WASEH/5/
Just to chow you I did this only on the nav:
Added:
<div class="inner">Home | About | Projects | Contact</div>
and on CSS:
.inner {margin: 0 auto; width: 50%;}
Classes are always good to use when you want to do multiple calls of the same to minimize code. Get in the habit of doing classes.
Lastly I suggest learning HTML5...Divs are great but you can simplified your code with html5
..
..Its simple to learn :)
Add
<div style="clear:both;"></div>
after you close the header
Your image style is all wrong hence why everything will look in the wrong position.
You should also be aware that you can use
margin: 0 auto;
Rather than
margin-right: auto;
margin-left: auto;
Consider using list elements for your navigation rather than just static text.
I'm not sure if I can do this, but this comes so close, I can't imagine it is impossible.
I'm aiming for a pure CSS/HTML solution.
I want two images with natively different heights to appear side by side with equal heights.
I want the left image to cover 60% of a div, the right image can have the remaining 40% (I know it will be less than 40% wide, but not its exact width).
The combo should appear in a div that covers 70% of the window width, regardless of the window size. Example of layout
Both images should retain their aspect ratio. Above left drawing shows a browser window with the unscaled images, the second is where the div covers about 60% of the window width, with the images showing in equal heights, and regardless of the browser window width, these percentages should remain unaltered, as I tried to show in the third and fourth diagram.
I've tried numerous variations, but often the right image wraps under the left one if the window becomes too small, or the images only scale with window height, which is definitely not what I want.
Here's a bare-bones example of my solution, using an embedded stylesheet:
<!DOCTYPE html>
<html>
<head>
<title>Stackoverflow Question</title>
<style>
div {
height: /*unfortunately cannot be a percentage*/ 200px;
width: 70%;
}
img.leftimage {
float: left;
width: 60%;
height: 100%;
}
img.rightimage {
float: right;
width: 40%;
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="droids.jpg" class="rightimage" />
<img src="WinZip.png" class="leftimage" />
</div>
</body>
</html>
Here is a fiddle using colors instead of images, and if it matters these are the images I used above - clearly different height/width ratios:
Kitting the beg borrow and steal together, I get this working example:
<!DOCTYPE html>
<html>
<head>
<title>Stackoverflow Question</title>
<style type="text/css">
.aspectwrapper {
display: inline-block; /* shrink to fit */
width: 40%; /* whatever percentage of window's width you like */
position: relative; /* so .content can use position: absolute */
}
.aspectwrapper::after {
padding-top: 40%; /* play with this to fit both images in one line */
display: block;
content: '';
}
.content {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */
outline: thin dashed green; /* just so you can see the box */
overflow: hidden;
}
.images {float: left;}
img {width: auto;height: 100%;}
</style>
</head>
<body>
<div class="aspectwrapper">
<div class="content">
<div class="images">
<img src="img1.jpg" />
<img src="img1.jpg" />
</div>
</div>
</div>
</body>
</html>
I want the background image of one of my divs to overflow into the body section. I've tried overflow:visible without any luck.
Check the pic:
See how the gold bits get cut off on the edge of the div? Suggestions please?
Here's my set up:
in the HTML:
<body>
<div id="container">
in the CSS:
body{
background-color: #0e0a04;
}
#container{
max-width: 960px;
margin: 0px auto;
padding: 0px;
margin-top:60px;
background-color: #0e0a04;
background-image: url(/bundles/tabredirector/images/background-image.png);
background-repeat:no-repeat;
background-position: -70px -20px; /*x,y*/
overflow:visible;
}
Thanks!
WHAT I ENDED UP IMPLEMENTING:
Thanks for all of your suggestions, they inspired my solution. My final solution was to use a master div (position:relative with z-index:-1) and my container (position:absolute z-index:1) and stick an image in the master div that can be positioned absolutely. This way the content always sits on top and the background isn't clipped.
first post your markup and css. Also give the div a width:100%.
You need to make sure there is a div outside your containing div. You can have a container above and below it which will hold all your other content.
Then you need to have a 100% width div with the full bg image centered.
Then within that div add another div for your content which can be 960 wide with an auto left and right margin to center it to the page.
Paste your HTML in your post as well the css is not enough as you need to add to your html!
Thanks
Background images on an element only appear within that element.
If you want your <div>’s background image to appear outside the boundaries of the <div>, you need to assign the background image to another element instead, e.g. the <body> element.
Heres a quick example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#fullWidthImage {
background-color: #0F9;
height: 200px;
width: 100%;
}
#centeredContent {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 200px;
background-color: #09C;
}
</style>
</head>
<body>
<div class="container">
<p> </p>
<p>top site content </p>
<p> </p>
</div><!--container-->
<div id="fullWidthImage">
<div id="centeredContent">
content bla bla
</div>
</div><!--fullwidthImage-->
<div class="container">
<p> </p>
<p> </p>
<p>bottom of site content </p>
</div>
<!--container-->
</body>
</html>
Is there something that will do what margin does but without the background drawing in that area? For instance, when you give an element margin: 1em you get a 1em border of blank space around the element, but the background draws in that area. Is there something similar to that except where the background doesn't draw?
My problem is I'm trying to put something below three float: lefted divs and right now I can't get any spacing between that and the floated divs above it. They just abut directly against each other.
The div that is going below the float: lefted divs has the property clear: both. If there was something that made that div have space between it and that floated div above it then that would work too.
Maybe this example will help explain (and solve) your problem?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* { margin: 0; padding: 0; }
h1, p { background-color: #eee; margin: 10px 0; }
div { background-color: pink; float: left; width: 100px; height: 100px; margin-right: 1px; }
br { clear: both; display: block; }
</style>
</head>
<body>
<h1>Hello, World!</h1>
<div></div>
<div></div>
<div></div>
<br />
<p>Lorem ipsum dolor set amit...</p>
</body>
</html>
Margins are supposed to be transparent. I think what you're seeing here is collapsing margins. Try putting a 1px border around your divs and see what happens.
Check out the CSS 2.1 spec:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Perhaps you're looking for:
border: 4px white; /* replace with your color */
With floated elements the margin around elements next to them is ignored. I think you will have to create an additional element between the floated element and the item you want.
Because the element is floated margin space won't always be properly respected. Use a margin/border hack where you simply set the element's color to the same color as your page background and its thickness to whatever you desire. Such as in the following post:
http://socialstreams.co/41/CSS_MarginBorder_Hack
I've created a design, but I'm having problems to make it work the way I need.
It would be too much to post a complete pack here, but here is the problem in short:
I have a DIV element side by side with another DIV element. One is a sidebar and the other is content.
When I put a fieldset in my content div, anything (like other divs) I put inside stretches fieldset and encapsulating div correctly. But if I remove fieldset, "guest divs" just dont stretch the encapsulating "content div".
Why that happens and how can I fix it?
Thank you!
If you need more info, please ask.
Code is something along these lines:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
#main-container
{
background-color:gray;
}
#header-container
{
background-color:green;
height: 60px;
}
#sidebar-container
{
background-color:maroon;
width: 150px;
float: left;
}
#content-body
{
background-color:white;
position: relative;
}
#block-1, #block-2
{
float:left;
width: 50%;
background-color: blue;
height: 95px;
}
#block-3
{
float: left;
width: 100%;
background-color:navy;
height: 156px;
}
#footer
{
width: 100%;
background-color:orange;
}
</style>
</head>
<body>
<div id="main-container">
<div id="header-container"></div>
<div id="sidebar-container"><ul><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li></ul></div>
<div id="content-body">
<div id="block-1"> </div>
<div id="block-2"> </div>
<div id="block-3"> </div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
You need to set overflow:hidden on your containing div, and make sure it has at least one dimension that is fluid. By default, overflow elements (i.e. floated elements, anything taken out of normal document flow) 'overflow their containing blocks bounds' (overflow: visible) without affecting their parent container. When you set overflow to hidden, you tell the box model to grow the containing div in any dimensions that are not set to fixed size such that it fully contains its content elements.
Depending on whether you need the content of the containing div to scroll or not, you may want to use overflow: auto or overflow: scroll. The auto setting will display scrollbars if necessary, scroll will always display them. Any browsers that support the CSS3 overflow provide additional capabilities that you can look up on W3C.org.
The first change I would make to your code is the following:
#content-body
{
background-color:white;
position: relative;
overflow: hidden;
}
An alternative method that is preferred these days can be found at the link below. I have not used it myself, so I can't say authoritatively how compatible the method is. However it does seem to be preferred over the overflow fix for modern browsers (Opera, FF 3.x, Safari, Chrome, IE8). For older versions of IE, they automatically expand divs anyway, so your set.
http://www.positioniseverything.net/easyclearing.html