child div own auto width to center it in parent div - css

I have a content div, which has a paragraph_content div inside with paragraphs in it.
The content div is 1000px wide. Now the paragraph_content automatically applies the 1000px width of the content. So I can never center it with margin: 0 auto, so the text in the paragraphs get centered. Now I could do text-align: center, but then the lines doesn't show under eachother since some lines are shorter and all is centered.
I want it centered, and all text lines placed right under eachother instead of some jumping in later.
And I want it centered so that if the text get adjusted it doesn't just expand it on the right side, but that the left and the right side auto expand so all stays centered.
what I have:
#content{
width: 1000px;
float: left;
overflow: hidden;
}
#paragraph_content{
display: block;
padding: 0;
margin:0 auto;
overflow: hidden;
}
#paragraph_content p{
float: left;
font-family: Lucida Console;
font-size: 12px;
padding: 5px;
}
http://jsfiddle.net/cUx2k/
I have put borders to show the space of the content and child div. the paragraphs are taking all of the space on the right for example as is the child div. So I cant never center it in the content div.

I fixed it by:
#paragraph_content{
display: table;
margin: 0 auto;
}

Try setting display:inline-block; to #paragraph_content, along with width:100%;.
It wasn't very clear to me what is the problem with text-align:center; in your case. You can maybe help adjusting the line-height of the element if you worry about the space between lines (if I understood you correctly).

Related

How can I center align my whole footer if it's divided into several floating divs that have centered text in them?

I have a footer made up of a few lists. I put each list in a div, and floating them so that the lists are horizontally next to each other. The text in each list is center aligned.
Now I'd like to center align all those divs! How can I do this? They are wrapped in a footer tag, but since the divs are floating, text-align:center; won't work.
Any ideas?
Thanks!
My CSS looks like this right now:
.footer{
height:180px;}
footer li{
list-style-type:none;
padding:0.2em 1em 0.2em 1em;
text-align:center;}
.section{
float:left;
margin-bottom:2.5em;
padding-top:0.8em;
margin-left:2em;}
To center an element, it'll typically need margin: 0 auto as stated in another answer.
If you want more elements within your container to center within the container, you should not be floating them. Floating them takes them out of the layout flow. You'll just want to make them display: inline-block.
* {
padding: 10px;
text-align: center;
}
footer {
background: #ddd;
}
.item {
display: inline-block;
background: #999;
width: 20%;
}
Example:
http://codepen.io/anon/pen/RKQJNa
.footer {
margin: 0 auto;
}
This should align the footer in the centre

HTML/CSS - Horizontally center a div that is constantly changing in width

I have a parent div (for sake of test we'll call it #parent) and a child div (test reasons #child). #parent is absolutely positioned to the bottom of the page, with a fixed width of 100% and a height of 75px.
child is a div that holds dynamic content (being changed with jQuery). Seeing as it is dynamic, the width of the div is always different. What is the most efficient way to center this div horizontally, since the width is always unknown & different? Any help would be awesome.
The correct way to do this would be the following:
#child {
margin: 0 auto;
}
This sets the top/bottom margins to 0, and then the left/right margins to auto - which means "as large as possible". So you have two equal margins on the left and the right, filling up the space completely, and hence you have a centred div.
This will only work on block elements like divs though - inline elements cannot have auto margins. If you need to centre an inline element (like a span or some text), use text-align: center; on the parent:
#parent {
text-align: center;
}
You could set the margins to: margin: 0, auto;
For fun you could use the CSS Flexible Box Layout Module. Here is a jsFiddle demonstrating what you could do:
See working jsFiddle demo
HTML
<footer>
<div class="dynamic-content">Here is some child dynamic content</div>
</footer>
CSS
body
{
background: #ccc;
}
footer
{
/* As of August 2012, only supported in Chrome 21+ */
display: -webkit-flex;
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #232323;
}
footer .dynamic-content
{
flex: 1;
padding: 10px;
margin: 0 auto;
background: #545454;
color: white;
font-family: verdana;
}
Centering a div using CSS:
HTML:
<div class="center">
.... more content ....
</div>
CSS:
.center {
margin: 0 auto;
}
OR
.center {
margin-left: auto;
margin-right: auto;
}
The margin: 0 auto; sets the left and right margin to whatever pixel left on the left and right of the page.
Try in jsfiddle
Make it display as an inline element and give the parent the property of text-align center
problem solved
#parent{
text-align:center;
}
#child{
display:inline-block;
}
Edit:
check how it works http://jsfiddle.net/ECMau/1/

horizontal centering divs in a div 100% (wordpress)

I'm trying to center horizontally a divs in a div with 100% width. The div conteiner is "#post-area" and all divs inside, have a class ".post".
this is the link: http://bit.ly/VOqkhv
When resize the browser is possible to see that not work good, in fact, all divs are not centering with the menu. How can fid this? I tried also with margin: auto; but nothing .
Thank you so much in advance.
Set the 100% div to position:relative then the element you want to center to position:relative; margin: 0 auto;
That is because they are floating to the left. You can use inline-block instead.
Add text-align: center; to #post-area
Remove float: left; and add display: inline-block; vertical-align: top; text-align:left; to .type-post

Paragraph margins affecting floated block beside it

I'm having a very frustrating situation with margins.. I have a div in the top of my markup that is floated to the right.
.grey{
float:right;
width:200px;
}
I need to apply some styles (background and margin) to the first paragraph after.
.blue{
background-color: blue;
margin: 10px;
overflow:hidden;
}
Now I have to make the paragraph "overflow: hidden" so the background doesn't extend under the floated div, but I have 2 strange problems.
the margin doesn't seem to apply to the side of the paragraph that touches the float;
the margin seems to apply to the floated element beside it..
Here's a fiddle.
http://jsfiddle.net/whiteatom/Nkfzg/6/
Could anyone tell me how to get the margin space between the "Blue" element and the floated one? and could anyone tell me how to make my floated element not have these phantom margins?
Cheers,
whiteatom
You need to apply a left margin to the floating element in order to space it away from the paragraph:
.grey {
float: right;
width: 200px;
margin-left: 10px;
}
As mentioned, margin collapse causes the top margin of your paragraph to affect the page body instead. This causes it to push both the paragraph and the floating element down.
To remove the top margin from the floating element, you have two options (choose only one):
Cancel margin collapse by floating the body:
body {
float: left;
}
This causes the margin to affect only the paragraph. Updated fiddle
Apply a negative top margin to your floating element:
.grey {
float: right;
width: 200px;
margin-left: 10px;
margin-top: -10px;
}
Here, you're shifting the floating element up to counter the margin collapse, which remains in effect. Updated fiddle
If the .grey div is always going to be 200px wide, just change the margin of the .blue div to be width + 10px. Like so:
.blue {
border: 1px solid red;
background-color: blue;
margin: 10px 210px 10px 10px;
};
Here's an updated fiddle.

Container DIV not expanding to include DIVs with absolute positioning

I imagine there is a simple solution, but it eludes me. If you look at this page you will see that only the header has a grey background. The grey background is set by the #container DIV which I would like to stretch down the entire height of the page:
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
}
At the moment it is only stretching over the header section of the page, and the content below is not contained within it. I imagine that is because the main content in the #content DIV has absolute positioning, which I need in order to be able to do some animations on the positioning of this div (you can see this when you hover over the nav bar image):
#content {
font-family: Lucida sans unicode !important;
color: #CECBBB;
text-align: justify;
position: absolute;
top: 210px;
padding: 20px 40px;
}
From some research it would seem that DIVs with absolute positioning are not included in the height of parent DIVs, but I am not sure how to fix this.
I'd be grateful for some help.
Thanks,
Nick
Yes, you're right. Elements with absolute positioning are not considered anymore in layout of their parent container. To understand it better, I recommend you read CSS Positioning from A List Apart.
IMHO, you have many solutions:
Use floated layout, instead of absolute positioned layout
Hardcode the height of container element
Use JavaScript to always update the height of the container element.
If you need to have #content absolutely positioned (as you state in your question) then the best way to get the background you desire is to either put the background-color: #292929 on the #content itself (you will probably need to adjust some positioning and padding to eliminate any black).
However, if the animation is the submenu at the top that opens on hover, then I suggest setting both the menu and the content divs to position: relative, and instead of animating the top position of the #content (as your script appears to be doing), animate the height of the menu (have it zero as default and animate to something like 45px high [that's what firebug showed the height to be open]).
#content {
color: #CECBBB;
font-family: Lucida sans unicode !important;
margin-top: 40px;
padding: 20px 40px;
text-align: justify;
}
add a margin-top and remove the position absolute will do this.
Expanding a bit on Cecil's answer here.
One can position divs with margins instead, in order to make sure parent grows with child.
Se this fiddle
https://jsfiddle.net/944oahmy/10/
Where the following css is used
#parent {
border: 1px solid blue;
margin-top: -5px;
margin-left: 10px;
display: inline-block;
}
#child {
border: 1px solid red;
margin-top: 75px;
margin-left: 150px;
width: 500px;
}

Resources