I have a divider that is centered in the page using margin:auto. Inside I have two more dividers (can't be combined, must be a divider nested in a divider) when I try to center something inside of this it does not center it in the center of the page. I'm assuming it has to do with the padding-left and padding-right that I've added...
Any insight?
Here's my code:
<center>
<div style="margin:auto; width:80%;">
<div style="width:50%; padding-left:20%; padding-right:20%;">
<div style="width:inherit; position:absolute; bottom:0%;">
<hr />
test
<hr />
<br><br><br>
</div>
</div>
</div>
</center>
Just remove the center tag:
<div style="margin:auto; width:80%;">
<div style="width:50%; padding-left:20%; padding-right:20%;">
<div style="width:inherit; position:absolute; bottom:0%;">
<hr />
test
<hr />
<br><br><br>
</div>
</div>
</div>
Check it out here: http://jsfiddle.net/V8qMm/
Related
<div style="border-style:solid; margin:auto;">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
I'm trying to put a div over the image, how let the floating div to occupy the space, so the footer div will be pushed accordingly.
I'm not sure what you're asking. Do you wish to have the yellow div take up only the amount of space of the div behind it (with the Google Doodle)? Or do you want the reverse, that is, you want the footer height to automatically adjust to the yellow div height?
I am not sure I completely understand. Do you mean to make the div containing the image to have a minimum height? You can use the min-height property then as follows:
<div style="border-style:solid; margin:auto;min-height:80%">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
-- Edit: If you are looking for some kind of a background-image in a div container you can control you can do something like this:
<html>
<head>
</head>
<body>
<div style="border-style:solid; margin:auto">
<div div style="background-image:url('https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg'); background-repeat: no-repeat;" >
<div style="border-style:dotted; height:400px; width:600px">
</div>
</div>
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
</body>
</html>
I can't get my block div's to center except my text on top and bottom. For some reason they are aligning only to the left.
I've tried margin:auto and setting the width 100%. I'm sure its probably an easy fix but I can't seem to find the error in my code.
Only thing that fixes it is adding a margin-left, however it doesn't look in all dimensions so would prefer if it naturally centered as it should.
http://jsfiddle.net/cV4UJ/
Some HTML please see JSfiddle instead:
<!-- Blocks -->
<div class="grid_24 center">
<div class="grid_7">
<div class="grey_boxes">
<p class="grey">
test
</p>
<p class="complete">
Complete
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_complete.png" class="complete" alt=" "/>
</p>
</div>
</div>
<div class="grid_1">
<p>
</p>
</div>
<div class="grid_7">
<div class="panel">
<div class="boxes card">
<p class="boxtext">
test
</p>
<p class="rotate">
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_rotate.png" class="rotate" alt=" "/>
</p>
</div>
<div class="boxesback card">
<p class="boxtext">
test
button
</p>
</div>
<div class="grid_7">
<div class="panel">
<div class="boxes card">
<p class="boxtext">
test
</p>
<p class="rotate">
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_rotate.png" class="rotate" alt=" "/>
</p>
</div>
<div class="boxesback card">
<p class="boxtext">
test
button
Any help would be much appreciated.
Thanks
http://jsfiddle.net/cV4UJ/2/
to make it work, you need to force the div.center to behave like a div (right now it has the properties of .grid_24 class, which is an inline left floated element)
.center {
margin: 0 auto !important;
float: none !important;
display: block !important;
width: 980px;
clear: both;
}
the most important properties needed for a centered div:
margin: 0 auto;
no float
be a block element (original display for a div)
have a width
i also put !important, to force it lose all the properties of grid_24
It seems it'd work. I don't know why... My description is too far over.
HTML
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:right"> <strong>Description:</strong></div>
<br />
now I understand.
Try to do this:
<div id="viewPhoto">
<div id="viewThumb" style="float: left">
<img src="http://images.br.sftcdn.net/br/scrn/73000/73753/santos-5.jpg" />
</div>
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
<div class="moderPanel" style="float:left; border:1px solid green; clear: left">
$MODER_PANEL$
</div>
Because you are putting the div in a float right way.
Try do to left using margin left. Like this:
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
It's because your float:right CSS statement is causing ithe description to float to the right of your container element. Try using float:left together with a small margin like this:
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:left; margin-left:15px;"> <strong>Description:</strong></div>
<br />
...
I have this html:
<div id='calendarControlPane'>
<div id='calendarControl'>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
</div>
</div>
I'm using "display:inline-block" on container divs because I want those divs to fit the size of their contents.
The problem I have is that they are drawn next to each other and need to be drawn below each other.
Well, depending upon your actual final application, using a float can work (see fiddle), though older versions of IE can choke on it:
HTML
<div id="calendarControlPane">
<div id="calendarControl">
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
</div>
CSS
#calendarControl > div {
float: left;
clear: left;
border: 1px solid black;
}
#calendarControl > div > div {
width: 14px;
height: 15px;
}
Oldschool fix:
<div id='calendarControlPane'">
<div id='calendarControl'">
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div>
</div>
</div>
Simply add a
<br />
after each div containing the inline-block class.
You're not really asking a question here, and the two bottom lines of your post are a bit hard to understand, but are you sure you don't want display: block instead?
edit: As drublic said, this is the default display value for divs, so you shouldn't need that style at all.
I tried many "Display" param in CSS and seem none able to set a proper alignment, please help me to solve it.
<div id="fadeshow2toggler" style="text-align:center; width:290px;">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
Display will not set any allignment.
This may be what you need.
<style type="text/css">
.prev, .next, .status{float:left;}
</style>
try this:
<center>
<div id="fadeshow2toggler" style="text-align:center; width:290px;">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
</center>
Can you modify the HTML? If so, add a container for the two anchors and the div like this
<div id="fadeshow2toggler" style="width:290px;">
<div class="linkscontainer">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
</div>
And use this CSS
.linkscontainer{
margin:0px auto;
min-width:50%;
}
.status{
display:inline;
}