If you take the code below and create an html page of it, you will see that the blue header div gets left aligned. This is despite the fact that the header element has a fixed width and left/right margins are set to auto.
The only way I can get the table centered properly is to remove the display:table-cell property.
I need it to be both center aligned (horizontally) and also need the child elements to be centered vertically (via the vertical-align and display directives).
How can I make the div be center aligned and also vertical aligned?
<!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" dir="ltr" lang="en-US">
<head>
<style type="text/css">
body {margin:0; padding:0; text-align:center;}
.wrapper {padding-top:59px; text-align:left;}
.header {height:138px;width:917px; background:blue;margin:0 auto; text-align:center; vertical-align: middle; display:table-cell; }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="siteTitle">Site Title Here</div>
<div class="tagline">Tagline goes here</div>
</div>
</div>
</body>
I changed your styles to use one of many techniques for vertical and horizontal centering. I prefer this one because it makes the most sense to me. No funky hacks involved and works across multiple browsers.
.wrapper
{
position: absolute;
top: 50%;
margin-top: -69px; /* half main elements height*/
left: 0;
width: 100%;
}
.header
{
width: 917px;
height: 138px;
margin: 0 auto;
background-color: #cccccc;
overflow: auto; /* allow content to scroll inside element */
text-align: center;
}
Drop the display:table-cell;
Just add padding to the top as needed and subtract that value from the height. Something like the following:
.header {
height:88px;
padding:50px 0 0 0;
width:917px;
background:blue;
margin:0 auto;
text-align:center;
}
You'll have to adjust the padding/height ratio to your taste.
Related
So, the issue is rather obvious. Now I've two elements in div containers, that should abut one another, but because of lack of css skills I need your help. So, the code is rather primitive.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Новый формат общения</title>
<html>
<link rel="stylesheet" type="text/css" href="center_ribbon.css">
<link rel="stylesheet" type="text/css" href="center.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.center {
top: 50%;
left: 50%;
width: 310px;
height: 50px;
position: absolute;
margin-top: -155px;
margin-left: -25px;
}
</style>
<body>
<div class="center"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>foo</h1></strong><div class="ribbon-stitches-bottom"></div></div></div>
<div class="wrap"><div class = "lifted">
<p>footext</p></div></div>
</body>
</html>
So, the corresponding code of css as follows
center_ribbon.css
html, body {height:100%;}
.wrap_ribbon {
position:relative;
width:50%;
margin: 0px auto ;
height:auto !important;
height:100%;
min-height:100%;
}
.contentdiv_ribbon {
display:block;
position:fixed;
margin-top: 200px;
margin-left: 170px;
}
center.css
html, body {height:100%;}
.wrap {
.center {
top: 50%;
left: 50%;
width: 260px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -130px;
}
}
As you can rightly notice, here is mess of code, sorry for that. I'm new to css and other web stuff and just poking around. Any improvements would be appreciated.
UPD. Added my page http://jsfiddle.net/7xZLM/5/
Try this:
<head>
<style>
.main {
margin: 0 auto;
}
.column {
float: left;
width: 40%;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="column">DIV 1</div>
<div class="column">DIV 2</div>
</div>
</body>
Click JSFiddle
It's hard to know what you're asking. It sounds like you want 2 divs that sit next to each other. If so, you're wanting to look at float in CSS.
simplified example
CSS
.col1 {
float: left;
}
HTML
<div class='bold col1'> foo</div>
<div class='col2'>footext</div>
An absolutely positioned element is positioned relative to the first parent having position other than static, if none is there it'll be positioned relative to the initial container, <html>
In your code .wrap doesn't have a positioned parent so it'll be positioned relative to the document, top:50%` will position the div 50% below the top of document...
Update
Since .wrap is positioned relative to the document, it's position changes with the height of the page, while the ribbon will stay at the top of the page, causing space between them.
Wrapping them inside a positioned parent will fix the issue.
check this JSFiddle
And from what i understood, you need the .wrap to look like it's coming out from the ribbon, for that you can apply an z-index less than the ribbon to .wrap,
as in this Updated JSFiddle
I’m trying to drift away from using tables and I'm now trying to create a simple div-based layout - header, content, footer divs with 100% width and no parent div. But I'm having a little problem with it. My content and footer divs overlap header div if I ever insert anything there. They appear right in the middle of the header div. If they are empty they appear normally. But the moment I insert header image in it the problem starts.
I tried to change float and display properties, but it gives me strange output. Can anyone help me position them vertically one after another?
Here is the HTML code:
<div id="topDiv"> topmenu</div>
<div id="headerDiv">
<div class="innerDiv"><img src=" photos/header.jpg" /></div>
</div><br /><br />
<div id="contentsDiv"> content</div>
<div id="footDiv"> footer </div>
And here are the css styles:
div#topDiv{
width:100%;
height:20px;
background-color:#800000;
text-align:center;
margin: 0px;
position:absolute;
}
div#headerDiv{
width:100%;
position:absolute;
background-color:#0FF;
text-align:center;
margin: 0px;
}
div#contentsDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#0CC;
position:absolute;
}
div#footDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#CF3;
position:absolute;
}
.innerDiv{
width:930px;
height:100px;
margin:auto;
background-color:#C30;
position:relevant;
}
You are using absolute and relative positioning a lot
and they are making your layout look Bad and elements are over lapping.
Also you don't need to define margin and every other properties many times
html, body{
width 100%;
height:100%;
margin:0px;
padding:0px;
}
div{
display:block;
margin:auto;
}
Horizontal Layout
CSS-Reset
Vertical Layout
Just remove all position:absolute from CSS rules and you are done.
Here is a solution for you. You don't need to specify width=100 Without defining a width, it is 100% by default. Simply specify the width you want for the body and every other container will be that width. float: left; will prevent containers from stacking vertically. They will actually stack horizontally.
Rather than using many Ids for Div, you can simplify the tags with HTML5 tags in such a way as below.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<style type="text/css">
body {
margin: 0 auto;
}
menu {
height: 20px;
background-color: #800000;
text-align: center;
margin: 0px;
}
header {
background-color: #0FF;
text-align: center;
margin: 0px;
}
article {
margin: 0px;
text-align: center;
background-color: #0CC;
}
footer {
margin: 0px;
text-align: center;
background-color: #CF3;
}
section {
height: 100px;
margin: auto;
background-color: #C30;
}
</style>
</head>
<body>
<menu>topmenu</menu>
<header>Header
<article>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/04/1-google-logo-tutorial.gif" />
</article>
</header>
<section>content</section>
<footer>footer </footer>
</body>
</html>
I have a container and 4 div’s inside it. My container is stretched to fill the entire window. In IE, if you re-size the window all the content re-sizes correctly, with all 4 margins around the container visible. I’m trying to get the same behavior in FF, yet I can’t seem to find the right CSS recipe.
Note, if you past the HTML and CSS code and examine the behavior in the IE, I’m trying to achieve the same behavior in FF.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IE AutoResize</title>
<style type="text/css" media="screen">
html {
height:100%;
width:100%;
overflow: hidden;
margin-bottom:40px;
}
body {
height:100%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#container{
background-color:#808080;
height: 100%;
Valignment-adjust: central;
padding: 10px 10px 10px 10px;
}
#top {
background-color:#00FF80;
height: 10%;
}
#left {
background-color:#FF8000;
float:left;
width: 20%;
height:80%;
}
#right {
background-color:#3944C6;
width: 80%;
height:80%;
float:right;
}
#bottom {
clear:both;
background-color:#FF0000;
height: 10%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
I am afraid this is another case of IE getting it wrong, and FF getting it right. You cannot have 100% height and then have an additional margins or padding top or bottom, you will need to find another way. If you could post your html or a link we may be able to guide further.
I've decided to throw in the towel on this problem and need some help :). As per title trying to vertically align an image wrapped in an anchor element in the center of a floated fixed height div.
Done a lot of googling for solutions and the closet I can get is below when the div is not floated (however it needs to be). Any ideas would be greatfully appreciated!
.class_name {
/*float: left*/
width:153px;
height:153px;
margin:3px;
padding:4px;
border:1px solid #dedede;
text-align: center;
vertical-align: middle;
background-color: #000;
display: table-cell;
}
<div class="class_name">
<img src="image.jpg" alt="" />
</div>
Well, I bumped into the same issue last night (for a gallery-like type of thing), and managed to find a solution after stumbling onto this page. I'm happy to report this also seems to work for floated elements!
The trick is basically to give the outer element "display: table;", and the inner element (containing the img) "display: table-cell;".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<style type="text/css">
.class_name {
display: table;
float: left;
overflow: hidden;
width: 153px;
height: 153px;
}
.class_name a {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="class_name">
<img src="image.jpg" alt="" />
</div>
</body>
</html>
For IE8, you do need to be in standards mode. Some additional positioning is needed to get it to work in IE7:
<!--[if lte IE 7]><style type="text/css">
.class_name {
position: relative;
}
.class_name a {
position: absolute;
top: 50%;
}
.class_name img {
position: relative;
top: -50%;
width: 100%;
}
</style><![endif]-->
If the height is fixed and you know the size of the image, just position the image manually. Use position:absolute;top:25px; on the image or something like that, or add a margin to the image: margin:25px 0;.
There is a cross browser css solution for this available here: http://www.vdotmedia.com/blog/vertically-center-content-with-css/
I would like the parent-div (red) to grow with the green child-div.
Now it just stops at the viewport.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>simple document</title>
<style type="text/css">
* {
font-family: verdana;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="margin: 30px; background: red; padding: 10px;">
<div style="background: green; width: 2000px;">dxyf</div>
</div>
</body>
</html>
I don't want to use display:table; since it does not work well in IE.
Any ideas?
Use display: inline-block; on the parent <div> and it will work as expected
Make the parent div float:left; and it will be expanded as desired.
I know I'm late, but here's what I do to fix the problem:
Add the clear INSIDE the parent at the bottom, and make the parent overflow: hidden.
Here's the modified code:
.clear{
clear: both;
/* make sure there is no height set to it */
line-height: 0;
height: 0;
font-size: 0em;
}
<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;">
<div style="background: green; width: 2000px;">dxyf</div>
<div class="clear">/div>
</div>
Works in FF3 and IE7, but not tested in other browsers though.
Hope to, at least, help you with your problem.
Use display:table; on the parent div. Or you can put the parent div into a cell of a table.
There's too much complicated advice here. Here's a tip: instead of tinkering with table-cells, and clear and floats, just make sure the child has a border that's equivalent to the padding you were looking for the parent. Borders are always drawn outside, so it'll do what you want.
This should work...
<div style="margin: 30px; background: red;">
<div style="background: green; width: 2000px; border: 10px red solid">dxyf</div>
</div>
...in all browsers, without a problem. HTH.
See this solution from quirksmode.org. It's pretty simple, just apply this class to the container/parent div:
div.container {
overflow: hidden;
width: 100%;
}