For some reason when I add normalize.css to my code my div won't center within it's container.
<div id="wrap">
<div id="myDiv">
</div>
</div>
and
#wrap {
height:100%;
width:100%;
text-align:center;
}
#myDiv {
height:30%;
width:60%;
background:#999999;
}
jsfiddle: http://jsfiddle.net/msteeledunn/3xw1t6yo/
To center horizontally you just need to add an automatic left and right margin to the div you want to position in the center. (This works for all elements with display:block, which is the default display attribute for div elements)
#myDiv {
height:30%;
width:60%;
background:#999999;
margin: 0 auto; /*Center horizontally*/
}
Keep in mind that you need to set a width for this to work. either in percentages or pixels.
http://jsfiddle.net/3xw1t6yo/2/
Add margin: 0 auto; to myDiv CSS
Yourtext-align: center is just going to center the text inside the div. You need to center the div with the following
#myDiv {
height:30%;
width:60%;
background:#999999;
margin: 0 auto;
}
Related
I have a #left, absolute positioned div and 2 other divs on the right side. When I add margin to the #top div on the right side it affects the #left div too. I know there's a margin collapse stuff but is it affects the position:absolute too?
The code is really simple, nothing special, but I can't find the solution.
* {
padding:0;
margin:0;
}
#wrapper {
width:400px;
height:400px;
background:gray;
position:relative;
margin-left:100px;
}
#left {
background:pink;
width:100px;
height:100%;
left:-100px;
top:0;
position:absolute;
}
#right {
background:red;
}
#top {
background:green;
height:26px;
}
<div id="wrapper">
<div id="left">Left</div>
<div id="top">top</div>
<div id="right">Right</div>
</div>
Jsfiddle: http://jsfiddle.net/9thvLfe0/2/
Just add this to #top :
float:right;
width:100%;
JSFiddle
Just give the margin to top and give negative margin same to left.
Well, the problem is that your #wrapper is relative and the #left is absolute.
By inheritance, #top and #right are also relative. So, adding a negative margin to top in these conditions, it's adding it to #wrapper.
You could change #wrapper to position "fixed" but you would have to manually set the margin/padding to #hide-top because as it is, he will be hidden under #wrapper. Unless you set it like that :
#hide-top {
position: relative;
top: 400px;
}
Yet, my solution wasn't to change your CSS but your JQuery. You could just hide #top with the hide() function. See my JSFiddle for example ;).
I want to align all elements vertically centered, and using exactly 50px of height, but somehow I have 2 problems:
The items use more height than 50px (green color)
The ">" text is not vertically centered
HTML
<div>
<ins class="logo"></ins>
<b>›</b>
...
</div>
CSS
div {
background:green;
}
a {
display:inline-block;
}
.logo {
display:inline-block;
height:30px;
padding:10px;
background:blue;
}
b {
line-height:50px;
height:50px;
}
Result
JS-Fiddle example:
http://jsfiddle.net/pG4y6/
How can I achieve this with changing the CSS?
div {
background: none repeat scroll 0 0 #008000;
display: block;
height: 50px;
vertical-align: middle;
}
Demo
In order to vertically center a line of text in a DIV, simply set line-height equal to height of div, so:
div
{
line-height:50px;
}
To vertically center a div in another one, the most common tecnique is:
.logo
{
display:block;
position:absolute;
top:50%;
margin-top:-25px;
}
So, in other words, offset 50% from the top and then push it up again with negative margin-top set to half box height.
I'm trying to center an image in a div I created. What am I missing here? I tried putting a style on the image, but that didn't work either.
http://jsfiddle.net/huskydawgs/8zs29/
<div class="wrapper-data">
<div class="data_row">
<div class="data_cell1_100">
<img width="450" height="509" src="http://oedblog.electricstudiolt.netdna-cdn.com/wpcms/wp-content/uploads/apple-e1382039006457.jpg" /></div>
</div>
.wrapper-data {
position:relative;
width:100%;
border: none;
margin: 30px 0 0 0;
overflow: hidden;
}
.data_row {
height:100%;
min-height:100%;
white-space:nowrap;
display:table;
}
.data_cell1_100 {
width:100%;
display:table-cell;
white-space:normal;
}
.data_cell1_100 img {
display:block;
margin: 0 auto;
}
.data_row also needs width:100%;
DEMO http://jsfiddle.net/8zs29/1/
Reason: Short and friendly, percentage width is relative to the parent element, you need to "pass it along" to your destination element. So if you intend to have the 100% width of the outer most element, in your case all of the width of the body with the 100% of the viewport, then all of the preceding elements should have the 100% width.
add width:100%; to div with the class .data_row
i am new to html and css and i couldn't figure out how to center align child div inside parent div.This is my code please answer and solve my problem.
CSS
.page {
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window {
float:center;
width:367px;
height:202px;
background-color:#c6c6c6;
margin-left:auto;
margin-right:auto;
}
* {
padding:0px;
margin:0px;
}
HTML
<div class="page">
<div class="window"><!-- i want to center align this div inside above div -->
</div>
</div>
First of all there is nothing called float:center;, float has only 3 valid values which are none, left and right.
Inorder to center any element you need to define some width first and than use margin: auto; to center it horizontally.
Demo
The other way to center an element is to use text-align: center; on the parent element, but this is a dirty way to do so.
You can also use CSS positioning techniques like nesting a absolute element inside a relative positioned element, and than we center it by using left: 50%; and than we deduct 1/2 of the total width of the element by using margin-left: -100px; (total element width say is 200px). You can also center the element vertically.
The other way to have an element centered vertically as well as horizontally is to use display: table-cell; property along with vertical-align: middle;
Demo
to center horizontally
.page
{
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
position:relative;
width:367px;
height:202px;
background-color:#c6c6c6;
margin:auto;
}
To center vertically and horizontally both
.page
{
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
position:relative;
top:50%;
left:50%;
width:367px;
height:202px;
background-color:#c6c6c6;
margin-left:-183px;
margin-top:-101px;
}
Please check here:
.page
{
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window
{
width:367px;
height:202px;
background-color:#c6c6c6;
margin:0px auto; /* to align center horizontally*/
}
Try this,
.window
{
width:367px;
height:202px;
background-color:#c6c6c6;
margin: auto 0px; /* For center. Apply same to page class*/
}
This may work.
Your "window" div is CORRECTLY centered within the "page" div.
Your problem is that the page div is not centered within <html></html>.
To achieve this add the following code:
.page
{
...
margin-left:auto;
margin-right:auto;
}
I have tried on my own for such a long time and all the posts I have read and googled so far have not helped me, so I hope one of you guys can give me a hint:
I have a Layout consisting of a header, a footer, and a content. This layout streches over the whole page in height (which has already taken me a while to figure out). So far, so good. But now I want to stretch the content-div as far down as possible, down to the beginning of the footer. No matter what I do, it does not work, it either stays the length of the text in it, or it becomes the size of the whole window, hiding the footer and generating a scrollbar.
I read about a solution making it position:absolute, but I don't want that.
Here is the example: http://jsfiddle.net/N9Gjf/1/
You would really help me out!
Here is the css:
html, body {
height:100%;
text-align:center;
}
#wrapper {
min-height:100%;
height:100%
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
#footer {
background-color: silver;
height:1.5em;
width:800px;
margin: -1.5em auto;
}
#header {
background-color: orange;
height:100px;
}
#content {
background-color: limegreen;
}
* {
margin:0;
padding:0;
}
And here is the html:
<div id="wrapper">
<div id="header">
<p>Header</p>
</div>
<div id="content">
INHALT
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
http://jsfiddle.net/calder12/CprV7/
You had a missing semi-colon after height in the wrapper. You want to set the height and min-height of the content to 100% as well.
#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
#content {
background-color: limegreen;
height:100%;
min-height:100%;
}
I think relative-absolute positioning is the best solution (I admit I am unable to find a way to make the heights sum up to 100%). Here is what you need to do:
Demo #1
Make the wrapper position relative
Put all divs inside the wrapper
Use absolute positioning to position and size content and footer; use one of the following:
Do not specify height of the div; specify top and bottom
Specify either top or bottom but not both; specify height
Alternate method is to use negative margins. This could be a brain twister but once you grasp the idea it becomes mush simpler than positioning. Here is what you need to do:
Demo #2
Assign heights to header and footer
Assign 100% height to content
Use negative margins on content so that (i) content pushes itself over the header (ii) pulls footer over itself
Use z-index positioning to bring header in "front" of content
Use a padding div to push the stuff inside the content div below the header
#wrapper {
min-height:100%;
height:100%; /*missed the semicolon here*/
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue; position:relative
}
Now it works DEMO
You have an error with the wrapper:
#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
You forgot to put a ; at the end of height:100%.
Try it and you will see that it will work