How to align a <div> to center of the page [duplicate] - html

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to align a <div> to the middle of the page
I have a div tag with hight set to 800px, I want that when the browser width is greater than 600px it shouldn't stretch the div but it should bring it to the middle of the page
How can I achieve this?
can I use the following code?
centered content

Short Answer:
with margin set to auto
<html>
<head><title>Your Title</title></head>
<body>
<div style="width:600px; margin:auto; border:1px solid red">
</div>
</body>
</html>
Long answer:
You might want to set an id for that div, and give appropriate css selector with the rules rather than using inline style like that.
Also, for that to work correctly in ie 6 and 7, you need to give the doctype declaration, otherwise it won't work because ie will work in quirks mode
http://www.satzansatz.de/cssd/quirksmode.html
So the complete answer should look like
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Your Title</title>
<style>#container { width:600px; margin:auto; border:1px solid red }</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>

put in the css the following properites :
max-width:600px;
position:relative;
margin:auto;
one thing I am not clear is do you want the div to take the width of the browser if the browser width is less than 600px?

Related

nested division tags different background

I can't get the second divsion tag's background image to show on top of the first. I assumed nesting these would work but neither the 2nd division tag or img i put it shows up.
Here is my code. It is supposed to put a white/gray image repeating down the middle with the image inside.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<html>
<HEAD>
<style type="text/css">
body { background-image:url('http://lib.store.yahoo.net/lib/oberers-
flowers/Background-2013.gif') ;
background-repeat: no-repeat;
background-color:black; overflow:none;}
.bgimg-paisley {
background-image:url('http://lib.store.yahoo.net/lib/oberers-
flowers/black-paisley-background.jpg');
height:87%;
background-repeat:no-repeat;
background-attachment:fixed;
}
.bgimgborder {
background-image:url('http://lib.store.yahoo.net/lib/oberers-
flowers/runner-for-paisley-test.gif');
background-repeat: repeat-y;
width:720px;
height:87%;
}
-->
</style>
</head>
<body>
<div class="bgimg-paisley"
style="position:absolute;top:97px;left:0px;width:100%;>
<div class="bgimgborder" style="position:absolute;top:97px;left:200px;>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-
flowers/bride-and-bridesmaid.jpg" width="700px">
</div>
</div>
</body>
</html>
You were missing closing quotes for style attributes:
In your snippet:
style="position:absolute;top:97px;left:0px;width:100%;
style="position:absolute;top:97px;left:200px;
Should be:
style="position:absolute;top:97px;left:0px;width:100%;"
style="position:absolute;top:97px;left:200px;"
When overlapping html elements its useful to note the z-index css property of your tags in question. It essentially tells the browser which elements should be viewed on top of others. The higher the z-index the higher the precedence. I made this fiddle with your code and set the img tags z-index to 100 and it showed right up.

Logical Grouping of content (layout) without using Tables

I am new to web-designing styles and css. I read that usage of tables for layout is a bad practice. Hence I tried to create this layout using <br\> , div and float.
Problem :
Once, <br\> is applied, I can't render the upper part, (similar to once \n is printed in console, we cant go to the upper line).
So, could any one provide an alternative way of designing the page, without using <table> and <br> tags.
Looks like a perfect example usage of a grid system.
Without using a grid system, you can just use float: left for each of the div and it should be OK.
Here is simple example for doing so,
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<style type="text/css">
.content{
width:150px;
height:100px;
border:1px solid blue;
}
.content .text{
display:block;
border:1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="text">
text here
</div>
<div class="text">
another text here
</div>
<div class="text">
yet another text here
</div>
</div>
</body>
</html>
Code Explanation
What i did is wrap text div inside content parent div and assign fixed width and height to parent div.
Now for child div i just used display:block and see the result. You do not need to use <br/> display:block; will do it for you.
Now what is the meaning of display:block; so it just tell browser to allow that particular DOM to take whole width of the parent div.
By adding css to DIV's you can get some great layouts (i.e the three column style you're looking for here) , try this aticle to get you started:
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Mixing relative and absolute sizes in CSS

I have a question about a problem, of which I originally thought, that it would be fairly simple to solve. But apparently it is not - at least not with only CSS.
This is the basic situation:
<div id="wrapper" style="height:90%;width:410px;background:#aaaaaa;">
<div id="top" style="margin:5px;width:400px;background:#ffffff;">
</div>
<div id="content" style="margin:5px;width:400px;background:#ffffff;">
</div>
</div>
I have a wrapper div that fills up 90% of the screen height and two inner divs. The first div "top" contains some varying elements. The second div "content" should fill out the remaining space of the wrapper div.
So far, I haven't found a way to set the div "content" to fill up the remaining space - even if I would know the exact height of the div "top" as I only know the relative height of the wrapper div.
Thus, I would be happy to learn of a method to either the div "content" to fill up the remaining space or how to mix relative and absolute sizes (i.e. height:100%-100px).
There is currently no cross-browser solution to achieve what you're trying with div elements and CSS. You can however get the behavior you want with the tried and true method of using a table instead.
<html>
<head>
<style type="text/css">
#wrapper {
height:90%;width:410px;background:#aaaaaa;border-spacing:5px;
}
#wrapper td {
padding:0;vertical-align:top;
}
#top {
background:#ffffff;
}
#content {
height:100%;background:#ffffff;
}
</style>
</head>
<body>
<table id="wrapper" role="presentation">
<tr>
<td id="top">Top</td>
</tr>
<tr>
<td id="content">Content</td>
</tr>
</table>
</body>
</html>
EDIT:
It appears I stirred a nest of hornets with my answer. There seems to be a near-religious following of people who say using tables for layout is bad. In many cases that is absolutely true, however there are situations where a table will do what CSS cannot. This is one of those situations, where a CSS alternative is on the horizon, but most browsers do not support it yet. It is up to the site designer to decide whether he wants to have a layout with cross-browser functionality now, or use a pure CSS layout with its limitations that may become easier to maintain in the future.
Your HTML code is really wrong:
don't use comma's after attributes
don't use inline CSS, put all CSS in a stylesheet and load the stylesheet in your HTML page
CSS syntax is: propertie: value; example: width: 10px; not: width=10px
To use 100% - 100px you can use CSS3 calc, but this feature has less browser support. You can use JS to make a sort of calc function.
There is no cross-browser way to get the content div to fill all available space with CSS, but it is fairly easy to make things look as if it did:
<html>
<head>
<style type="text/css">
#wrapper {
width:400px;height:90%;border-style:none solid;border-color:#aaaaaa;border-width:5px;background:#ffffff;
}
#top {
border-bottom: 5px solid #aaaaaa;
}
#content {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
This should be sufficient for most situations, unless you want to use something like an onmouseover handler on the content.

float makes div not surround children

The following 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">
<head>
<title></title>
</head>
<body>
<div style="border: 1px solid blue;">
<div style="float: left;">
Expected NPV</div>
</div>
</body>
</html>
...renders a parent DIV with a blue border and a child DIV inside. However, the float:left; directive makes the parent not surround the child with a border (which is what I desire).
Is there a way to make this happen w/out removing the float:left?
I boiled the HTML down to a very simple example to illustrate the basic problem. I realize float:left; is nonsensical in this example, but it is required from the original HTML. I can post that if it would be more helpful.
You can give the parent an overflow to take the child's height into account, like this:
<div style="border: 1px solid blue; overflow: auto;">
<div style="float: left;">
Expected NPV</div>
</div>
You can test it here. For a full explanation, check out the excellent write-up on quirksmode.org. Note that overflow: hidden also works here, you can test that version here.
Use overflow:auto; eg. on the container.
Similar problem : Floating image to the left changes container div's height

Transparent div containing non transparent content - IE 6 height:100% not working

Hey there! I have a bit of a sticky IE 6 problem (don't we all?).
I figured out what I think is a pretty neat way to have a div with a transparent background that shows the background's body image and containing non-transparent content. This consists of three divs really:
One big container div, one absolutely positioned transparent div for the background and one relatively positioned div with the non-transparent content.
I position the two divs inside the containing div so they sit on top of each other giving the appearance of a transparent background with non-transparent content.
The Containing div is pushed to the size of the content div. I set the transparent background's height and width to 100% causing it to take on the containing div's size. This then means that my background expands with the content making all my div's extensable.
This last bit is where the problem comes in. IE 6 does not cause the background div to take on the height of the containing div. If I specify a height it works fine, but this means that I loose the extendability of the whole thing.
Here is the basic code:
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="contentDiv">
<div class="tranparentDiv"></div>
<div class="nonTranparentContent">
<div class="contentBody">
<h2 id="quote">“time is given to let you apply what you have learnt in reality.”</h2>
<p>– Nandipha Nombuthuma, Concept Interactive graduate</p>
</div>
</div>
</div>
</body>
</html>
CSS code (save as “style.css”)
#charset "utf-8";
/* CSS Document */
body{
background:url(bg.png);
}
.tranparentDiv{
-khtml-opacity:.6; /*several different ways to set the transparency to ensure cross browser independence*/
-moz-opacity:.6;
-ms-filter:"alpha(opacity=60)";
filter:alpha(opacity=60);
opacity:.6;
position:absolute;
top:0;
left:0;
background:#FFFFFF;
width:100%;
height:100%;
}
.nonTranparentContent{
width:inherit;
position:relative;
}
#contentDiv{
width:500px;
margin-left:auto;
margin-right:auto;
position:relative;
/*height:200px add this to work in ie 6*/
}
I'd appreciate any suggestions how I could work around this. I would hate to have to go and set a height every time I change my content.
IE6 can't calculate what 100% is without a height specified to the containing element. To my knowledge there really isn't anything you can do to get exactly what you want here with CSS, but you could use some sort of javascript to find the height of the container and then set the height of the transparent div to match the container's height.
Using jQuery, I believe it would look something like this:
var containerHeight = $('#contentDiv').height() + 'px';
$('.tranparentDiv').height(containerHeight);