As of now, I can horizontally center the image, but once I try to vertically center it (adding top-margin), the parent div also moves down as well (which is what I don't want).
Here is an image of what I am talking about: Screenshot
I think the best option would be to set it to an absolute position, but then I am having issues horizontally centering it.
<div id="header">
<div id="container">
<div id="logo">
<img src="images/logo.png" />
</div>
</div>
</div>
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
#logo {
height: 96px;
width: 484px;
margin: 50px auto;
}
Help would be greatly appreciated! Thank you
You could put overflow: hidden on the #container. It will introduce a new block formatting context, so the margins are not collapsed anymore.
jsFiddle Demo
The magic of overflow: hidden
Can overflow:hidden affect layout?
From what I see, the container is not going lower (nor it shouldn't), it's just the logo (due to the margin) that it's going lower.
Where do you want to center the image, on the header?
Give the header a fixed height and use margin or padding to center your image.
If the header's height needs to be fluid, then you could go with
#container {
width: 960px;
margin: 0 auto;
position: relative;
vertical-align: middle;
display: table-cell
}
hope that helps!
R
Related
I'm trying to figure out how to center more than one DIV horizontally.
My Code looks like this:
HTML:
<div id="circle">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
CSS:
#circle {
text-align: center;
}
#circle1 {
background: #D5DED9;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
#circle2 {
background: #D5DED9;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
They do center horizontally but there's a break between the circles and I have no clue how to get them in a straight horizontal line.
I googled already, but didn't found anything that works..
You can add display:inline-block; to both #circle1 and #circle2
Also, thee is no need for margin: 0 auto; on both div's since you have text-align:center; in your wrapper.
JSFiddle Demo
You shouldn't use display: inline-block to center elements like divs due to how whitespace in the HTML document will affect the styling.
This jsFiddle outlines the differences. imbondbaby's inline-block divs have a small amount of whitespace between them that can only be removed by eliminating whitespace in your markup. This can be diffcult to diagnose and debug, and has bitten me before.
Instead, center the container of the divs using margin: 0 auto. Then float: left the divs inside their parent to place them next to each other, and apply a clearfix to the container.
Style:
#wrapper {
margin: 0 auto;
}
.clearfix {
display: table;
clear: both;
}
.circle {
float: left;
}
HTML
<div id="wrapper" class="clearfix">
<div class="circle"></div>
<div class="circle"></div>
</div>
If I've understood your question correctly, you want the two circles to be on the same line, centered within the wrapper circle div.
Basically, you could float one circle to the left, and the other to the right to get them on the same line. Then to adjust how close they are together within the wrapper div, you could adjust the width property of the wrapper div with a percentage (which in this case is relative to the div's parent, the body).
Here's an example of a potential solution: http://jsfiddle.net/UFN5S/
By the way, there are other similar questions to this already on SO. I know you've said you googled, but usually with questions like this one there has already been asked and answered on SO.
i.e.:
How to center two divs floating next to one another
or
Aligning two divs side by side center to page using percentage width
Hope that helps!
I have tried all sorts of things to try and get this working, I'm a little dated with html markup so please forgive me but i'm sure my problem can easily be solved. I have 2 divs (1 image logo and 1 flash object flame ) which I would like to center inside a container div which I would like to be centered with any browser screen resolution. I would also like the horizontal scroll bars to only appear when the browser window is below 800px wide hence the min-width:800px (this works ok) on the container div. my child divs keep appearing above and below each other and when I set them to absolute positioning the just appear to the left ontop of each other.....I just want everything to be aligned centrally and both divs at the top of the screen, can someone please help and point me in the right direction.
Thanks
Andy
.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
}
.logo {
margin: 0 auto;
position:absolute;
vertical-align:top;
display:inline-block;
width:1059px;
height:136px;
}
.flame {
margin: 0 auto;
vertical-align:top;
position:absolute;
display:inline-block;
width:861px;
height:134px;
}
HTML:
<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 {
margin:auto;
width:800px;
height: 500px;
background-color:#F00;
}
.logo {
margin:auto;
float:left;
width:450px;
height:136px;
background-color:#096;
}
.flame {
margin:auto;
float:left;
width:350px;
height:134px;
background-color:#099;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">LOGO GOES HERE</div>
<div class="flame">FLASH CONTENT GOES HERE</div>
</div>
</body>
</html>
Using floats, you can make your divs stack up next to each other. However, the sum of the widths of the divs must be less than or equal to the width of the container, otherwise the 2nd div will appear below the first div. Your container will also always be centered to the browser. Also, if the width of the browser is below 800px (width of the container), horizontal scroll bars will appear.
One last thing, this code centers the container but does not center your divs if the sum of the widths of the floated element are less than the width of the container.
You can go through this link to learn how to do that as well.
EDITED:
Alternately, if you know the sum of the widths of the logo and the flash banner, which I think you do, you can create a div with width equal to the sum and apply a margin:auto property to it. Involves use of an extra div and prior knowledge about the width of your logos and flash banners, but I think will suit your purpose.
Hope this helps. :)
.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
**position:relative;**
}
#media only screen and (max-width: 800px){
html{
overflow: auto;
overflow-y: hidden;
}
}
Final version
To sum it up - the task was basically this:
have two elements width different widths be aligned alongside in one row
this row should always be centered as kind of a header
only when the screen is smaller than 800px a horizontally scrollbar should appear
the non-visible edges are trimmed on the left and the right side
This is a possible solution:
Try before buy on jsfillde.net
And a little explanation:
HTML markup
<div class="wrapper">
<div class="center">
<img src="" alt="">
<object></object>
</div>
</div>
CSS
body, html {
width: 100%;
min-width: 800px;
height: 100%;
margin: 0;
padding: 0;
}
div.wrapper {
width: 100%;
height: 134px;
overflow: hidden;
}
div.center {
position: relative;
margin:0 auto;
width: 800px;
height: 100%;
}
div.center > img {
position: absolute;
top: 0;
left: -499px;
}
div.center > object {
position: absolute;
top: 0;
left: 560px;
}
On "How it works"
The first div wrapper spans an area from the left side to the right side. This is the space which is always visible. To cut off the edges I used overflow: hidden; on that element. So everything that sticks out will be invisible.
The second div center is placed in the middle of the viewport using margin: 0 auto. It has a fixed width. I used 800px because this was the desired min-width in the question. It will work with any other wide, too.
Now it's time to align the two header elements. Both have a fixed width. In this case the image is 1059px and the object is 861px, making it a total of 1920px. The middle of those elements would be obvious at 960px. Our container's center is actually at 400px, because the min-width of the page is 800px. So the actually meeting point of both elements is at 560px within this container, as we have a 160px shift. So for the object it's easy: simple set left: 560px;. But the left container must be placed, that it ends at this point. We had a width of 1059px and substract it from the 560px and get the final value of left: -499px;.
As the container in the middle is centered, both elements will be centered, too. And as the wrapper's overflow is hidden, both edges will be cut off at the end of the viewport. Without any scrollbars visible.
At the end, there's only one thing left: Set min-width:800px on the <body>-tag, so that the scrollbars get visible as soon, as the window is smaller than 800px.
First answer
position: absolute takes the element out of there parents flow, except you set the parents position explicitly:
.container {
position: relative;
}
This should do the trick, but it didn't test it with your markup.
I have a div that has a footer image taking up 26px of space. The CSS is set to display a vertical scrollbar when needed, however I need to make sure the scrollbar doesn't overlap into my footer area, so I use bottom:26px; to bring it up. When that happens though the scrollbar is shifted upwards and I can't see the top of the content or the top arrow of the scrollbar. I am not sure what to change for the css to fix it so the scrollbar is at the very top, and leaves a 26px spacing at the bottom for my image. Any help is appreciated.
HTML
<div id="channel-container">
<div id="channel">
</div></div>
CSS
#channel {
color: #FFFFFF;
text-align: left;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
bottom: 26px;
}
#channel-container {
float: right;
width: 31%;
height: 100%;
}
Think about restructuring your html. If the div is supposed to scroll, but the footer is not then I wouldn't group them together. Set margin/padding to 0 on footer and same for bottom of scrollablediv. They should seamlessly mash together. Also obviates the need for using position absolute and a bottom value.
Here is a fiddle of what I think you are after. http://jsfiddle.net/vdZ6R/
<div id="container">
<div id="scrollablediv"></div>
<div id="footer"><img src="" /></div>
</div>
I have a small problem but I can't get it solved.
I have a content header of 864px width, a background image repeated-y and footer image.
Now I have this <div> over the background image and I want it to be like 855px width and the text align left but yet aligned center so it fits in the bg.
I once had it oke width some padding left but I figured out that was the correct padding for my screen resolution.
Soo briefly it is:
Setting a div width - align the div center - align its text (content) left.
Set auto margins on the inner div:
<div id="header" style="width:864px;">
<div id="centered" style="margin: 0 auto; width:855px;"></div>
</div>
Alternatively, text align center the parent, and force text align left on the inner div:
<div id="header" style="width:864px;text-align: center;">
<div id="centered" style="text-align: left; width:855px;"></div>
</div>
Try:
#your_div_id {
width: 855px;
margin:0 auto;
text-align: center;
}
Use auto margins.
div {
margin-left: auto;
margin-right: auto;
width: NNNpx;
/* NOTE: Only works for non-floated block elements */
display: block;
float: none;
}
Further reading at SimpleBits CSS Centering 101
All of these answers should suffice.
However if you don't have a defined width, auto margins will not work.
I have found this nifty little trick to centre some of the more stubborn elements (Particularly images).
.div {
position: absolute;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
Need some help with making the following layout work in IE:
Light gray is a browser window. Dark gray is the main content area, centered against the window. To its left is a fixed width yellow box, and to its right is a variable width green box. The yellow+blue+green triplet is then repeated down to the bottom (it's basically a simple blog layout).
I got this working in Firefox/Chrome by using negative margin-left and floating all three colored boxes. The IE does not understand it. Tried padding dark gray area on both sides by the width of the yellow box (and then do the overflow: visible, white-space: nowrap in the green box) - still no go.
Any ideas or pointers? What the hell does the IE understand?
Thanks
Alex, the trick here is pretty simple. Position those two *fixed_size* and *var_size* containers absolutely within #main. Give #main relative positioning. Then given the two absolutely positioned containers negative left and right margins, respectively.
Should certainly work in IE
Good luck and let me know if you need additional help
EDIT: this is the code that is also visible in the Fiddle:
<div id="main">
lorem ipsum
<div id="left">
</div>
<div id="right">
</div>
</div>
and the CSS:
#main {
margin: 0 auto; position: relative; height: 300px; width: 400px; background: gray;
}
#left {
position: absolute; width: 100px; height: 75px; left: -100px; background: red;
}
#right {
position: absolute; width: 100px; height: auto; right: -100px; background: blue;
}
Obviously, use the appropriate ways to center a div in IE with:
body {
text-align: center;
}
#main {
text-align: left; margin: 0 auto;
}
EDIT2: Check out the updated jsFiddle.. Hopefully that is something like what you wanted: http://www.jsfiddle.net/2avM7/3/
You should start with a master container, that is wide enough to visit all 3 containers from left to right, so like this:
<div id="container" style="margin: 0 auto;">
<div id="fixed_size>Content goes here</div>
<div id="main_content" style="margin: 0 auto;">Center content</div>
<div id="variable_size_container">Content for that goes here!<div>
</div>
margin: 0 auto; does the trick here, it centers a div in the center of its parent div.