So, i have a div which i want to take up the entire width of the browser, -40px on each side,
my idea was to have
width: 100%; and margin: 0 -40px; however this does not work.
I dont want to use width: xx% as i have no control over this.
Update
Ok got it going at http://jsfiddle.net/ApcLv/
but now my question is:
How do i get this to be centered?
Wrap it in a another <div> and give the parent <div> a width:100% property, and the child <div> a margin:40px; property:
<!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" xml:lang="en" lang="en" >
<head >
<title >Example</title>
<style type="text/css">
#wrapper {
width:100%;
}
#main {
margin:40px;
background-color:red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
This is a test
</div>
</div>
</body>
</html>
have a div in a div... the outer div can be 100% wide with a 40px padding and the inner div can be 100% wide too.. which will take up the inner div's width - the 40px padding. :)
Simply
[..]
<body>
<div style="margin: 40px">Blabla</div>
</body>
[..]
..will create a DIV that takes up all available horizontal space, minus 40px on each side.
A block level element always uses all its available horizontal space unless otherwise specified. A div with exactly 40px to each side of the BODY element will thus always be centered. No need for wrappers to achieve this.
Related
I have a setup requiring a div filling 100% of the screen with a margin of 10px. Inside that, there is a navigation pane at the top followed by a content div below with a padding and an inner content dive with a padding. However, using the 100% height of parent and then adding a margin/padding stretches the div to 100% + margin + padding. Is there a fix for this? I noticed the absolute positioning trick, but that messes up the flow of the other divs if I absolutely position my content div. It also makes the resizing and flow non-liquid. Any way to keep those things and still achieve my goal, preferrably with CSS and not javascript?
Code Below:
ASPX
<!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>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
</div>
<div id="content">
<div id="inner">
</div>
</div>
</div>
</body>
</html>
CSS
html, body
{
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:Black;
}
#wrapper
{
height:100%;
margin:10px;
background-color:Blue;
}
#navigation
{
height:100px;
background-color:Green;
}
#content
{
height:100%;
padding:10px;
background-color:Orange;
}
#inner
{
height:100%;
width:100%;
padding:5px;
background-color:Lime;
}
You can try adding box-sizing:border-box onto any elements which you want to have 100% height and padding at the same time.
Works in IE8+ and the good browsers, so browser support is actually quite good
http://css-tricks.com/box-sizing/
You can try two things...
1) changing the height of the wrapper, navigation, content and inner to something like 98%.
2) try adding a transparent 1px solid border to the wrapper and other elements. This often shifts the margin to margin relationship of elements.
Hope this helps
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'm trying to have an element with a greater width then the body, but not cause horizontal scrolling.
http://jsfiddle.net/hYRGT/
This hopefully demonstrates my problem somewhat.
The #header contains the #imghead and is set to 960px width.
What I want is the browser to 'think' the page is 960px wide.
Because #imghead is more wide then #header and positioned relative so it's in the center.
I'm not able to use a background-image because #imghead is going to be replaced by a flash component.
I'm also not able to use overflow:hidden because I DO want the element to show outside the 960px. I just don't want it to cause h-scrolling.
I do not want to disable h-scrolling altogether, I'd really love a CSS solution. But if javascript is the only way of dealing with this, I guess it would do.
Can't you just absolutely position it relative to the body, 50% from the left and then on the inner element do a negative left margin of half the total width of the element itself which would center it?
I think I got what I wanted:
http://jsfiddle.net/hYRGT/3/
Just in case jsfiddle would be down:
HTML
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>WEBSITE title</title>
</head>
<body>
<div id="header">
<div id="imghead"><img src="/img.jpg" alt=""/></div>
</div>
<div id="wrapper" class="index">
<div id="container">SOME CONTENT</div>
</div>
</body>
CSS:
/*RESET*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-family:inherit;font-weight:inherit;font-style:inherit;text-align:left;vertical-align:baseline}
table{border-collapse:collapse;border-spacing:0}
a img,:link img,:visited img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
img{display:block}
a{color:inherit}
/*STYLES*/
html, body{
height:100%}
body{
background:#000;
text-align:center;
overflow:auto;
overflow-x:hidden;
overflow-y:auto}
#wrapper{
z-index:12;
position:relative;
height:auto!important;
min-height:100%;
width:100%;
background:#0f0;
overflow:auto;
overflow-x:auto;
overflow-y:visible}
#container{
width:960px;
margin:0 auto;
overflow:auto;
background:#00f}
#header{
z-index:50;
position:relative;
overflow:visible;
width:960px;
margin:0 auto;
height:0px;
background:#f00}
#imghead{
width:1100px;
position:relative;
left:-70px;
background:#ff0}
The content overlaps the header by design,
I hope this helps someone.
1 limitation is that the header does not horizontally scroll,
but in my design that is not necessary.
Tested in FF3, IE8, S4 and C5
Specifically, I am referring to a situation where you need to have a total width of say 100% on a DIV, but a 10 pixel padding and 1 pixel border. (And don't rely on the browser automatically setting it to that width — say it's floated left for instance.)
Is there any simple way to accomplish this without using JavaScript?
No, there's no way to set this on one element that works with the currently major browsers.
You could use 2 nested divs. Set the 100% width on the outher div, and set the padding and border on the inner div.
If you use box-sizing: border-box you can set width: 100%; border: 1px solid black; padding: 10px; and the total of the width, border, margin, and padding will be what is specified for the width. Source
EDIT: True, browser support is a bit limited. FF 3.5 and Safari 4 support it, not sure about IE8 or Chrome.
What about the following solution?
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Content with Menu</title>
<style type="text/css">
.content .outer{
width:100%;
border:1px solid black;
background-color:green;
}
.content .inner{
margin-left:10px;
margin-right:10px;
background-color:red;
}
</style>
</head>
<body>
<div class="content">
<div class="outer">
<div class="inner">
<p>Hi!</p>
</div>
</div>
</div>
</body>
</html>
Update
OK, doesn't accomplish what you are talking about with just one element.
That's only possible with CSS 3.
What I need is a div with pixel-based height containing 3 rows. The top row has variable height depending on the contents. The bottom row has a fixed height. The middle row fills any remaining space. Everything is width 100%.
I've been struggling with constructing a div and CSS-based layout for hours that takes me literally seconds to do using a table. I've tried many approaches including negative bottom margins, nesting divs, various positionings, height settings, display:table, nothing gets me what I need. I've searched this site and the internet, refreshed my memory of the various approaches for liquid layouts. No avail.
I'm not especially worried about compatibility with "old" browsers like IE6 (this app isn't for "public" use). Just getting this to work in IE8+FF+Chrome would be great.
I've stripped the problem to a bare example posted below, along with the table-based layout showing what I want. Sidenote: I love CSS and table-less layout, but, sometimes it just seems ridiculous the lengths we have to go through to make it work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.container {width:500px;height:200px;border:1px solid black;background-color:#c0c0c0;position:relative;}
/* Styles for colors */
#top td, .top {width:100%;background-color:pink;}
#mid td, .mid {width:100%;background-color:lightgreen;border:1px solid red;}
#bot td, .bot {width:100%;background-color:lightblue;}
/* Styles for Table-based Layout */
#layout {width:100%;height:100%;border-collapse:collapse;}
#layout td {vertical-align:top;padding:0px;}
#top td {}
#mid td {height:100%;}
#bot td {height:2em;}
/* Styles for Table-less Layout */
.top {}
.mid {}
.bot {height:2em;position:absolute;bottom:0px;}
</style>
</head>
<body>
Layout I want (with tables):
<div class="container">
<table id="layout">
<tr id="top"><td>Top:<br/>Content-based<br/>Height</td></tr>
<tr id="mid"><td>Middle:<br/>Fill remaining space</td></tr>
<tr id="bot"><td>Bottom: Fixed Height</td></tr>
</table>
</div>
<hr/>
Best I can get with CSS:
<div class="container">
<div class="top">Top:<br/>Content-based<br/>Height</div>
<div class="mid">Middle:<br/>Fill remaining space</div>
<div class="bot">Bottom: Fixed Height</div>
</div>
</body>
</html>
Meanwhile, I couldn't let this stop my progress, spent too much time already. I'm going ahead with the table layout in my project. It's simple and fully satisfies the requirements, even if the purists are wailing somewhere.
Thanks for any suggestions though - I'm mainly curious what the "right" solution is at this point, I hate being stumped. Surely, it's doable?
The key to your problem is looking at the problem differently -- if you Google "sticky footer" you'll find solutions like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.container {width:500px;height:200px;border:1px solid black;background-color:#c0c0c0;position:relative;}
.notbottom2 {
min-height: 100%; background-color:lightgreen; width: 100%;
height: auto !important;
height: 100%;
}
.mid2 {padding-bottom: 2em;}
.top2 { width: 100%; background-color: pink;}
.bottom2 { height: 2em; width: 100%; margin-top: -2em; background-color: lightblue; }
</style>
</head>
<body>
<div class="container">
<div class="notbottom2">
<div class="top2">Top:<br/>Content-based<br/>Height</div>
<div class="mid2">Middle:<br/>Fill remaining space</div>
</div>
<div class="bottom2">Bottom: Fixed Height</div>
</div>
</body>
</html>
EDIT: there, this should be what you want, more or less.