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
Related
Please take look at the following page on mobile:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="wide">WIDE</div>
<div id="fixed">FIXED</div>
</body>
</html>
CSS:
#wide {
background-color: blue;
width: 120px;
}
#fixed {
background-color: green;
position:fixed;
left: 0px;
bottom: 0px;
}
The fixed element is there at the bottom right as expected. However, when you increase the width of the wide div past your device viewport width (in css pixels), the fixed div disappears.
Why does this happen? Is there a way to prevent this behaviour?
Further details:
An easy way to test this is to use mobile view in Chrome DevTools, and change the width directly under Elements > Styles.
Close to the limiting width you see the fixed div cut off horizontally.
Same thing without meta viewport, but the threshold will be at the default viewport width 980px.
Tried combinations of height: 100% and min-height:100% on html and body with no success.
No issues in desktop browser.
Answering my own question here.
I am not sure why the fixed div is not rendered. It is somehow related to the fact that the 'wide' div overflows the body element, causing the view to be zoomed out and the body ending up less tall than the viewport. I still believe that the mobile browser should show the fixed element just like the desktop browser does.
My fix: wrap the wide content in a container element with overflow-x: scroll. This works well on mobile, the fixed div is shown again and the wide content can be swiped across.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="ctnr">
<div id="wide">WIDE</div>
</div>
<div id="fixed">FIXED</div>
</body>
</html>
CSS:
#ctnr {
overflow-x: scroll;
}
#wide {
background-color: blue;
width: 120px;
}
#fixed {
background-color: green;
position:fixed;
left: 0px;
bottom: 0px;
}
Not sure if this will help you but I added display: table-cell; to #wide.
This way your div won't exceed the maximum width.
I have tried literally everything I can think of. I have tried dozens of coding samples from the stack and tutorial sites. I cannot get this to work no matter what I do, and I'm absolutely at my wits end with trying to figure it out. Me and CSS don't get along.
Here is what I'm trying to do:
Static Header (always on the screen.)
Footer that always stays at the bottom of the page. (Scrolls with content, but if there isn't enough content will appear at bottom of the screen.
Left menu with background that goes all the way down to the top of the footer.
I'm having trouble getting the background to go all the way down. It is a normal problem of being unable to have 100% parents, relatives and absolutes. This code I have now works fine with the exception of the background. I'm honestly considering just making the background a image and have it repeat. Here is the code:
<!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">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#main_wrapper {
min-height: 100%;
position: relative;
}
#header {
width: 100%;
background:#0F0;
height:42px;
position:fixed;
left: 0;
top: 0;
}
#content {
margin-left: 200px;
background:#F00;
}
#footer {
width:100%;
height:32px;
position:absolute;
bottom:0;
left:0;
background:#00F;
}
#content_wrapper {
padding-bottom: 32px;
padding-top: 42px;
overflow: auto;
}
#left_menu {
width:200px;
background: #FF0;
float:left;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header"></div>
<div id="content_wrapper">
<div id="left_menu">MENU</div>
<div id="content">CONENT</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
JSFiddle Source
As you can see in the Fiddle code, what I'm going for is to have the yellow background take up the whole height. And any content that gets added will cause the whole page to scroll, footer to move to bottom and header remain static. All of that works right now except for the yellow background color taking up the whole height.
The easiest thing to do would be to add an image to the background that repeats in the Y direction.
background-image:url(images/background.gif);
background-repeat:repeat-y;
This gets the job done, but there has to be a better way!
I've got a left floated div with 2 rows of left floated child blocks. Each row is cleared with a simple clear block.
Problem is that IE6 expands parent block's width to 100% of available space while in other browsers parent's width is set to exactly wrap the children.
When all child blocks are floated, the width is correct in IE6. But I need children blocks to be arranged in rows, so I put an additional clear block after each row. After that parent's width expands to 100%.
Is there a workaround to have normal parent's block width in IE6? (tables are not welcome)
Have a look at the image illustrating the problem
<!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" lang="en" xml:lang="en">
<head>
<style type='text/css'>
#parent {
float: left;
background-color: black;
}
.block {
width: 30px;
height: 30px;
background-color: yellow;
margin: 10px;
float: left;
}
.clear {
height: 1px;
clear: both;
font-size: 1px;
line-height: 0px;
}
</style>
</head>
<body>
<div id="parent">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="clear"></div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="clear"></div>
</div>
</body>
I don't have access to IE6, so I can't actually check this. But you could try the following:
http://jsfiddle.net/YA7CN/
(putting the blocks in a container with clear:both)
As I said, it might give you the same problem... but it's an option.
By the way, are you designing for a specific public that uses ie6? If not, I wouldn't be too worried about things looking different in it, you will get mad adapting everything to a version that crashes everything it touches!
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
I have always been wondering how other people get to align to the centre the main div container as the only way I manage so far is adding to the css file the following:
*{
padding:auto;
margin:auto;
text-align:centre;
}
I have seen other pages using: *{padding:0px;margin:0px} but I can't see where or what do they do to centralise the main container.
Could anybody explain how?
Code example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>
Could anybody explain how do they do it in the following page?
http://www.csszengarden.com/?cssfile=/179/179.css&page=4
Do not use the * selector as that will apply to all elements on the page. Suppose you have a structure like this:
...
<body>
<div id="content">
<b>This is the main container.</b>
</div>
</body>
</html>
You can then center the #content div using:
#content {
width: 400px;
margin: 0 auto;
background-color: #66ffff;
}
Don't know what you've seen elsewhere but this is the way to go. The * { margin: 0; padding: 0; } snippet you've seen is for resetting browser's default definitions for all browsers to make your site behave similarly on all browsers, this has nothing to do with centering the main container.
Most browsers apply a default margin and padding to some elements which usually isn't consistent with other browsers' implementations. This is why it is often considered smart to use this kind of 'resetting'. The reset snippet you presented is the most simplest of reset stylesheets, you can read more about the subject here:
http://meyerweb.com/eric/tools/css/reset/
The basic principle of centering a page is to have a body CSS and main_container CSS. It should look something like this:
body {
margin: 0;
padding: 0;
text-align: center;
}
#main_container {
margin: 0 auto;
text-align: left;
}
You can text-align: center the body to center the container. Then text-align: left the container to get all the text, etc. to align left.
I would omit the * { text-align:center } declaration, as it sets center alignment for all elements.
Usually with a fixed width container margin: 0 auto should be enough