I have two <div> elements inside a container <div> and I need to align one of them on the left of the container, and the other in the center of the container while keeping them inline.
If I just float the first one left, the second one gets pushed off-center to the right.
Right now my best solution is to make the container position: relative with text-align: center and align the first element to left with position: absolute.
Perhaps there is an alternative, better way to do this, without going for absolute positions?
This is a really long shot, but i've found that applying a big negative margin-right on the left floated element will compensate on the center-offset...
try giving the floated div a margin-right: -1000px;
Is there a restriction for two div in a div? You could make 4 divs:
<div id="one">
<div id="first"></div>
<div id="two">
<div id="second"></div>
</div>
</div>
And apply float: left to #first and #two and then margin: auto the #second
Related
On a project I have four absolutely positioned elements on a page that sit inside an absolutely positioned container (the latter in order to align them relative to the viewport’s bottom, while more content will follow below the viewport). The four elements are next to each other and do not overlap.
Is there a way to (dynamically) center the four elements inside their absolutely positioned parent? I know it sounds weird, since absolute positioning means exactly no automatic placement.
Dynamically would mean that responsively the elements change both size and position at a certain breakpoint, but should still be centered horizontally in the viewport at all times.
I could think of a solution like this with an additional inner div, but didn’t get my head around to actually solving the puzzle, since I don’t know a good way for the inner div to grab the total width of its four absolutely positioned child elements:
<div class="myAbsoluteContainer">
<div class"myInnerDivForCentering">
<div class="myAbsoluteChildElement" id="child1"></div>
<div class="myAbsoluteChildElement" id="child2"></div>
<div class="myAbsoluteChildElement" id="child3"></div>
<div class="myAbsoluteChildElement" id="child4"></div>
</div>
</div>
I am not sure why you need to absolutely position the children. Is this what you are trying to achieve: http://jsfiddle.net/k65pxydx ?
.myAbsoluteContainer {
text-align: center; /* Centers the elements horizontally */
}
.myAbsoluteChildElement {
display: inline-block;
vertical-align: middle; /* Centers the elements vertically */
}
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
I'm sure this is a very simple thing but I've been banging my head against it all day, so I decided to just ask.
I have some divs that I would like to align to the right within their parent div. "text-align: right" works if I don't specify a width:
<div style="text-align: right;">
<div>
This text aligns to the right
</div>
</div>
But if I put a size in pixels on the inner element, it does not:
<div style="text-align: right;">
<div style="width: 200px;">
This div stays on the left
</div>
</div>
What am I missing?
Actually, text-align affects the inline elements including the text.
From the MDN
The text-align CSS property describes how inline content like text is
aligned in its parent block element. text-align does not control the
alignment of block elements itself, only their inline content.
In the first case, the inner div inherits the text-align property from the outer div and applies that to its inline elements,
I.e The inner div is not aligned itself to the right or left. But as it fills the entire horizontal space of its parent, you'll see the text is aligned at the right side of the outer div.
In the second case, the inner div has an explicit width and it doesn't fill the entire horizontal space of its parent anymore, and the text-align is applied to the text not the div itself.
If you want to move the inner div to a side. You have two choice:
Use float: right for the inner and clear the float at the end of the outer div. Working Demo
Use display: inline-block for the inner and text-align: right for the outer div.
Working Demo.
The text in your second example is indeed aligned to the right. The problem is that its containing element is given a specific width so it is aligned to the right of the div with the specified width.
I believe you are looking to float the inner div element to the right since text-align does not apply to block-level elements:
<div style="text-align: right;">
<div style="width: 200px; float: right;">
This div does what I want!
</div>
</div>
In the above code, text-align: right, could also be applied to the inner div and achieve the same result (unless there are other inner elements that need the CSS).
Here is an example of all three methods: http://jsfiddle.net/6KDC4/
I have 2 elements beside each other by floating right and left.
the right element width is dynamic by padding of children elements which increase or decrease dynamically! but the left element is a simple DIV. I want it's width to change according to the right element width. how can it be done by CSS ?
example :
<div style="float:left"></div>
<div style="float:right;padding:5px 10px;">
<a>child1</a>
<a>child2</a>
<a>child3</a>
</div>
I am not 100% sure what you are trying to achieve, but if I understand right:
you have an area A in wich you are floating the right element with the 3 children
the rest of area A you want to fill with the left element
Is this correct?
Well the easiest way would be to wrap an inline-block element around the right element, that represents the whole A area and the right element floats on the right side of this parent element. Then all properties you assign to parent are going to represent the area A that is not covered by the right element. For example background color:
<div style="display:inline-block; width:100%; background-color:blue;">
<div style="float:right; right:0; padding:5px 10px; background-color:yellow;">
<a>child1</a>
<a>child2</a>
<a>child3</a>
</div>
</div>
Here you can see the result on jsfiddle: http://jsfiddle.net/rKQXJ/
How do you Horizontally center align a DIV that is absolutely positioned in another DIV ?
HTML
<div style="width:250px;height:250px;background:red;position:relative;">
<div style="width:100px;height:100px;background:blue;position:absolute;"></div>
</div>
Thank You
My answer works only if the background of the inner div has no background color. As your example does, I add a third div. The second one is for the centering, the third one is for the coloring.
<div style="width:250px;height:250px;background:red;position:relative;">
<div style="width:100px;height:100px;position:absolute;padding-left:50%;margin-left:-50px">
<div style="background:blue;padding:0px;"></div>
</div>
</div>
The important thing to notice here is: padding-left:50%;margin-left:-50px;. -50px being half of you div's width.
<div style="width:250px;height:250px;background:red;position:relative;">
<div style="width:100px;height:100px;background:blue;position:absolute; margin: auto;"></div>
</div>
the margin auto should center your div both horizontally and vertically
If you know the sizes of each div and you plan to continue to use position:absolute;, you just set the top and left coordinates. So something like this in the inner div
top:75px; left:75px;
http://jsfiddle.net/jasongennaro/zQjaU/
*May be off a few px. You may need to adjust.