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
Related
I have a problem, i would like to place a div after a div with a div child of absolute position.
What i will like to do is main div to fit with main-inner-one height and normal div to take place after main div
Here is my code: jsfiddle
#main {
width:100%;
background-color:#f00;
padding:20px 0px 20px 0px;
position:relative;
}
#main-inner-one {
width:100%;
height:200px;
background-color:#f9c;
position:absolute;
}
#normal {
width:100%;
height:50px;
background-color:#000;
}
<div id="main">
<div id="main-inner-one"></div>
</div>
<div id="normal"></div>
To make the #main-inner-one stretch across the #main you need to remove absolute positioning.
Preview - This is how it should've worked.
Answer: Change this
#main-inner-one {
position: relative;
padding:20px 0px 20px 0px;
}
#main {
padding:20px 0px 20px 0px; /* remove this */
}
if i understand correct you want to adjust the width and height based on the child's width and height. for me this worked by setting the parent div display to table-cell and width, height to auto. the child set display to block and the width, height to vw / vh or anything else except % values.
#main {
display:table-cell;
position:relative;
width:auto;
height:auto;
background-color:#f00;
padding:20px 0px 20px 0px;
}
#main-inner-one {
display:block;
position:relative;
width:100vw;
height:80vh;
background-color:#f9c;
}
#normal {
display:block;
position:relative;
width:100%;
height:50px;
background-color:#000;
}
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;
}
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
Here is the HTML Code:
<div id="header">
</div>
<div id="container">
<div id="leftbar">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
And here is what I want to achieved, even though it's not valid CSS, but I think you will understand my point:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
}
#footer
{
width:100%;
height:10px;
}
#container
{
width:100%;
height:100%-100px-10px; /* I want #container to take all the screen height left */
}
#leftbar /*fixed width, the height is always the same as the screen height*/
{
height:100%;
width:200px;
}
#content
{
height:100%;
width:100%-200px; /* take all the screen width left except the leftbar */
overflow:auto;
}
Someone just put this as an example:
http://limpid.nl/lab/css/fixed/header-and-footer
I do not think using <body>padding to exclude the header and footer is a good way to go, because I would like all the scroll bars appear inside the div#content, not for the whole <body> tag.
The normal width of a block element is 100% so all you should need to do is add a margin as appropriate. If I'm understanding your question properly.
Have you considered using position:fixed for the framework elements? Or are you stuck supporing IE6?
the horizontal bit can be achieved quite easily
#content {margin-left:200px;}
#left-bar {float-left;width:100px;}
The vertical bit is trickier as there is no vertical equivalent of float. A close approximation that might work is:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
position:absolute;
top:0;
left:0;
}
#footer
{
width:100%;
height:10px;
position:absolute;
bottom:0;
left:0;
}
#container
{
width:100%;
height:100%;
margin-top:100px;
margin-bottom:10px;
}
#leftbar
{
height:100%;
width:200px;
float:left;
}
#content
{
height:100%;
margin-left:200px;
overflow:auto;
}
You could use calc(), e.g.:
#container {
...
height: calc(100% - 100px - 10px);
}
And you could either use margins or fixed positioning to set the position of it to between the header and footer.
As for the scrollbars, just apply overflow: hidden to body and div#container and apply overflow: auto to div#content.