I have a form with a set of divs that act as rows in a table.
Each row div has a set subordinate divs
Outer
...Left
...Right
.....Top
.....Bottom
A span in the Top div interferes with a span in the Bottom div.
==> the span in the Top div causes the span in the bottom div
to be displaced to the right. When I turn off "float:left" for the Top div span, the problem goes away.
Image below shows the HTML, related CSS and results.
You should add a clear:left on your ListRowBottomDiv class like this:
.ListRowBottomDiv {
clear:left;
}
Related
I have a div nested inside another. The parent div contains the title for a drop down menu. The inner div contains the choices. I have them in different divs so that I can add a scroll to the inner div without it causing the title to scroll. I have borders around both. The inner div looks to be 1px narrower on each of the sides. How do I make the child div exactly the same width as the parent div?
That's what width:inherit; is for.
What's your code like?
Try this, it should work:
width: 100%;
I noticed that inline-blocks and blocks behave differently when they are situated near a floated element : background of blocks extends under the floated element while inline-blocks wrap it entirely.
div is a block :
div {
height: 5em;
width: 5em
}
div:first-child {
background: #27A5CC;
float: left
}
div:nth-child(2) {
width: 6em;
background: #EEEEEE
}
div is an inline-block :
div {
height: 5em;
width: 5em
}
div:first-child {
background: #27A5CC;
float: left
}
div:nth-child(2) {
width: 6em;
background: #EEEEEE;
display: inline-block
}
Is there an explanation for it?
I will assume that you understand the difference between block and inline-block displays. Let us now look at how floats work:
A float is a box that is shifted to the left or right on the current
line. [...] Content flows down the right side of a left-floated box
and down the left side of a right-floated box.
A floated box is shifted to the left or right until its outer edge
touches the containing block edge or the outer edge of another float.
If there is a line box, the outer top of the floated box is aligned
with the top of the current line box. [...]
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
Your examples explained below:
Example 1
The first div is floated. It is taken out of the flow and aligned with left side of the parent. The second div also starts from left side ignoring the first div as if it did not exist.
Result: both divs end up with their top-left corners aligned with each other.
Example 2
The first div is floated. It is taken out of the flow and aligned with left side of the parent. The second div is an inline block element, therefore it follows the rules that apply to content flow and line boxes. It starts rendering towards the right side of first div just as normal text would.
Result: the second div aligns with the right side of first div.
I have a parent div that has a bunch of child divs inside it. I want the child divs to be horizontally laid out beside each other. Which means the parent div can not be set to an exact width amount as the image amount will change all the time. So I presumed setting the parent div to width:100% then the children div items inside it I would float:left.
It will only work if I give the parent div a set width that matches the width of all the child divs inside it. Is there a way to have it 100% and lay the children divs out side by side horizontally inside the parent.
Take a look at this example fiddle - is this what you want?
Essentially, you just need to declare the following on your wrapper div, thats all
#wrapper{
white-space:nowrap;
overflow:hidden; /* whatever suits you - could be scroll as well*/
}
you don't need to float the images, as they are no block-level elements per default.
I'm creating a horizontal menu bar.
There is an outer div that contains inner divs (each of these divs is the individual menu item).
I use float: left for styling on these inner divs to display them horizontally instead of vertically.
The problem is that the menu bar has uneven space on the left and right, hence the overall menu bar doesn't appear to be centralized... i.e the first menu item on left has lesser space from left border and the space between last menu item on right and the right border is more.
I want equal margin/padding on the left and right to make the menu bar display in center.
I tried setting margin-left: auto; margin-right: auto on the outer div and then on the inner div as well. Both don't seem to help.
Already had a look here: How to horizontally center a <div> in another <div>?
However this particular answer is to center just one div, what I have is a collection of horizontal divs (menu items) that need to be centralized.
Any help is appreciated.
If your menu items aren't complex (like no fixed sizes or sub-elements), try adding the following styles:
#outer {
text-align: center;
}
.menu-item {
display: inline; /* replace 'float:left' with this */
}
DEMO
Otherwise you'll need a wrapper for the inner elements that has a fixed width:
#wrapper {
margin: 0 auto; /* center in outer DIV */
width: /* sum of widths of inner elements */;
}
DEMO
NOTE: Semantically its better to style menu items using a list, as in the DEMOs.
Firstly if all your menu items have specified widths and display:inline which is default, you wouldn't need a float to line them up.
But supposing you do, when you set a float, your elements are removed from the natural flow of the document, and hence margin:auto will not work to center it. What you could do in this case is create another container div of specified width for the menu items, within which you could use float to line them up.
Now what's left is to center this one container div within your outer div, which you have already seen how to solve. For example, you could use the margin:auto technique on the container div to center it. Make sure you have text-align:center for the outer div.
I have a div element whose height I set with em, and whose width I set as a percentage. There is an image contained within. It has a width as a percentage (83%). However, if I am at a resolution where that div element is starting to get a little narrow, the image narrows up as well, but rather than taking up the entire div (as it should), the image just becomes small and appears just at the top of the div. To compensate for this, I want to vertically align my image within the div element. How can I do this?
vertical-align does not work in DIV elements. the only way to do this is to set this property to your div in css :
.divClass
{
display:table-cell;
vertical-align:middle;
}
after it, your DIV element will act like TD elemnt of Table.
to align your image in div with specifying percentage for image vertical position look at link bellow (percentage value) :
http://reference.sitepoint.com/css/vertical-align
Give the div position:absolute and the image inside it position:relative with top:50% and margin top equals to negative half the image height. This will center your image vertically.
div{
border:1px solid red;
width:400px;
height:400px;
position:relative;
}
img{
position:absolute;
top:50%;
margin-top:-64px; /*negative half image height */
}
Check working example at http://jsfiddle.net/qtL4n/