Here's a simple puzzle that's been frustrating me for a while today:
Consider this page markup:
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange; }
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
How can I get div#content centered in the page regardless of viewport width?
I've tried a variety of tricks (including text-align: center; display: inline-block;) and absolute positioning, but with all of them the div#content is left-aligned when the browser window is brought under 750px in width.
I've seen a few high-profile websites do this in the past. For example on Apple.com when they advertised the new retina iPad: the iPad pictured was a very wide image that extended past the main page area (note it was not a CSS background image of the <body> element), but it didn't cause scrolling when the browser window only fit the main page content. Unfortunately I can't seem to find any existing sites that do this so I can't find a reference.
Thanks.
Is this it? Take a look -> http://jsfiddle.net/joplomacedo/CkvuG/
HTML
<div id="page">
<div id="main">
<div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
</div>
</div>
CSS
#page {
overflow: hidden;
min-width: 200px; /*same as #mains width*/
}
#main{
position: relative;
height: 500px;
width: 200px;
margin: 0 auto;
background-color: lightgreen;
}
#extended-out {
height: 200px;
margin: 0 -100px;
background: indianred;
border: 1px solid red;
}
#extended-out img {
width: 100%; height: 100%;
}
http://jsfiddle.net/CNNcV/
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange;
margin:0px auto;
width:100%;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
Is that what you're looking for?
Add margin: auto to this,
#content { width: 750px; height: 100px; background: orange; margin: auto}
Related
I'm struggling with working out how to get this to work.
I have an image inside a wide-header div. It's a responsive header, so the image is set to width:100% to make the banner resize to the size of it's container.
Problem is, the image needs to sit full width, but the container has a 10px margin on either side.
The HTML cannot change as it's CMS based. The banner must sit inside region-content with it's margin of 10px either side
I have successfully managed to push the image to the left most edge by using a position:relative on the image and placing it left:-10px to counter the left side gap.
Problem I am having is doing the same on the opposite side, as I cannot extend the width. The banner needs to be 20px wider... but it's set as a percentage based width so simply adding 20px doesn't work.
Essentially I need to work out how to get this to work as 100% + 20px.
It's for mobile so border-box:box-sizing could be used, but I cannot utilise this correctly, though I am sure a solution may require it.
JS Fiddle
HTML
<div id="region-content">
<div class="content">
<!-- HEADER IMAGE -->
<div id="wide-header">
<img src="http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg" width="1400" height="475" alt="">
</div>
</div>
</div>
CSS
body{margin:0 auto;}
#region-content{
margin-left: 10px;
margin-right: 10px;
outline:1px solid red;
}
#wider-header{
width: 100%;
box-sizing: border-box;
overflow: hidden;
max-height: 300px;
text-align: center;
background-color: #333;
}
#wide-header img {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1300px;
position:relative;
left:-10px;
}
Another way is to do the following (although you might have to look at your other content inside the #wide-header)
position:relative;
left:-10px;
to
position:absolute;
left:0;
right:0;
I have updated your fiddle http://jsfiddle.net/zr8xp/3/
If you want increase the width more than 100%. Try width:105%; see this editted fiddle its the same as 100% + 20px
width:105%;
If you are not bothered about old versions of IE you can try this way:
width: calc(100% + 20px);
JSFIDDLE
I update your jsfidle by adding some css modifications:
link: http://jsfiddle.net/zr8xp/8/
CSS:
body{margin:0 auto;}
#region-content{
margin-left: 10px;
margin-right: 10px;
outline:1px solid red;
}
#wider-header{
width: 100%;
box-sizing: border-box;
overflow: hidden;
max-height: 300px;
text-align: center;
background-color: #333;
padding-left: 10px;
padding-right: 10px;
}
#wide-header img {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1300px;
position:relative;
}
HTML:
<div id="region-content">
<div class="content">
<!-- HEADER IMAGE -->
<div id="wide-header">
<img src="http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg" width="1400" height="475" alt="">
</div>
</div>
</div>
Try this:
#wide-header img {
height: auto;
margin: 0 -10px;
max-width: 1300px;
}
Another approach worth considering is using a background image instead. E.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
body{margin:0 auto;
background-image: url(http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 0;
}
#region-content{
margin-left: 10px;
margin-right: 10px;
outline:1px solid red;
min-height: 600px;
}
#wider-header{
width: 100%;
box-sizing: border-box;
overflow: hidden;
max-height: 300px;
text-align: center;
background-color: #333;
}
</style>
</head>
<body>
<div id="region-content">
<div class="content">
<div id="wide-header">
</div>
</div>
</div>
</body>
</html>
I did this by putting my img in a DIV and set the div style: float:right;width:0px;overflow:visible;
This created the image to the right of main content div, outside of the width of my header and other content.
This is a fairly basic HTML/CSS question, and I'm sorry I'm having to ask this here (I searched my best!). I've written the following HTML and CSS code, and while the header section is separated by a neat 20 pixels from the article and aside sections, the footer is being separated by only 10 px. In fact, irrespective of the margin I set for the footer, the separation remains 10px. What am I doing wrong?
It would be amazing if you could test this code out in a browser to see what I mean. I'm also inserting a link to a picture below of the skewed margins between the article / aside section and the footer section.
http://cl.ly/image/3M2u1L0x2C0x
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Grey Boxes</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="wrapper">
<header></header>
<article></article>
<aside></aside>
<footer></footer>
</div>
</body>
</html>
CSS Code
#wrapper {
margin: auto;
width: 940px;
}
body {
background-color: #fafafa;
}
header {
height: 120px;
width: 920px;
display: block;
margin: 10px 10px;
position: relative;
background-color: #c6c6c6;
}
article {
height: 740px;
width: 600px;
margin: 10px 10px;
float: left;
position: relative;
background-color: #c6c6c6;
}
/* Keep scrolling! */
aside {
height: 740px;
width: 300px;
margin: 10px 10px;
float: right;
position: relative;
background-color: #c6c6c6;
}
footer {
height: 120px;
width: 920px;
display: block;
margin: 10px 10px; /* Why is this being ignored? */
background-color: #c6c6c6;
position: relative;
clear: both;
}
Any help will be greatly appreciated! I'm sorry if I'm not following all the community guidelines here - this is my first time posting on StackOverflow, and I'll pick things up soon! Thanks ahead! :)
You need to clear the floats before you get to the footer. Changing your HTML to this will work:
<div id="wrapper">
<header></header>
<article></article>
<aside></aside>
<div style="clear:both;"></div>
<footer></footer>
</div>
I'm trying to make some decoration outside the main content div,
that would be getting hidden if the window size is small.
I thought for a while and came up with the following markup, (you can copy paste and see it),
and that's best I could think of right now. The problem however is that because I used percentage margins, the decoration gets unstable and shaky while resizing, and sometimes is even stepping on the content div.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: yellow;
}
div.content {
display: block;
width: 958px;
height: 400px;
background-color: #CCC;
margin: 0px auto;
}
div.wrap {
margin: 0px auto;
min-width: 958px;
max-width: 1058px;
overflow: hidden;
position: relative;
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
div.left, div.right {
background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg);
width: 50px;
display: block;
height: 50px;
bottom: 0px;
position: absolute;
}
div.left {
right: 479px;
margin-right: 50%;
}
div.right {
left: 479px;
margin-left: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="content">
<-- Content
</div>
</div>
</body>
</html>
So, could you recommend guys for some other way around without using percentage margins, to make it more flexible..? Thanks!
EDIT:
This is what happens in Google Chrome on resize:
As the browser has to re-calculate the margins based on the parent's width changes, this is kind of expected behaviour.
If you want to keep content centralized on the screen without playing with max-width, min-width and margins as percentage, and there won't be any element that should be affected by the .wrap position in the document flow, you could do something like this:
div.wrap {
width: 1058px;
overflow: hidden;
position: absolute;
left: 50%;
top: 0;
margin-left: -529px; /* 1058/2 * -1 */
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
This will centralize the content horizontally in every situation.
Hope it helps.
Clear your floats:
<div>
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<style>
.clear{clear:both;}
</style>
I would like to try to build a clean and nice piece of code where I can accomplish the result you see in the image below. It's ok in Firefox, Chrome or Safari, but not in IE.
I created a JSFiddle with the code.
Basically all I want a 100% width of the red bar (edge to edge in the window) but the content (including the navigation) should be limited in width.
So I'm looking for a nice, clean snippet to make this work in all browsers (including IE...)
<style>
body{
background-color: #fff;
margin: 0;
padding: 0;
}
#subtopContainer{
background-color: #f00;
}
#subtop, #header, #content{
width: 980px;
margin-left: auto;
margin-right: auto;
}
#header{
height: 150px;
}
#subtop{
height: 50px;
}
</style>
<div id='container'>
<div id='headerContainer'>
<div id='header'></div>
</div>
<div id='subtopContainer'>
<div id='subtop'></div>
</div>
<div id='contentContainer'>
<div id='content'></div>
</div>
</div>
<style>
body { background-color: #fff; margin: 0; padding: 0; }
div.wrapper { margin: 0 auto; width: 980px; background: lime}
div.header { height: 70px; margin-bottom: 40px;}
div.content { height: 400px; }
div.bar { height: 40px; background: #f00; overflow: hidden; position: absolute; top: 70px; width: 100%;}
</style>
<body>
<div class="bar"></div>
<div class="wrapper">
<div class="header">
Header Stuff
</div>
<div class="content">
In order for this to work,
div.bar 'top' = div.header 'height'
div.header 'margin-bottom' = div.bar 'height'.
</div>
</div>
</body>
%19 Left Section Width, %80 Content width:
But i want to fix left section to 200px and content section is the rest of viewable area's width.
How can i do this with CSS?
<html>
<head>
<title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
div
{
border: 1px solid black;
}
#header
{
background: #0f0;
width: 100%;
}
#leftcol
{
background: #f00;
float: left;
width:19%;
/* max-width: 200px; */
height: 500px;
}
#content
{
background: #fff;
float: left;
width: 80%;
height: 500px;
}
#footer
{
background: #0f0;
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div id="header">
Header Section</div>
<div id="leftcol">
Left Section</div>
<div id="content">
Content Section</div>
<div id="footer">
Footer Section</div>
</body>
</html>
There's plenty of ready made templates that would work here, take a look at these for example:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
http://bonrouge.com/2c-hf-fluid.php
Take a look: http://www.brunildo.org/test/lf100r.html