I'm having a few problems trying to position some divs in my website layout. All of them is related to the div's size. I'm using Chrome's developer tools to inspect the divs and when I mouse over some divs it is just 1px-high, but it has content inside and its content has some height. Shouldn't it have at least the same height of its content?
I don't know if I explained well, so I'm posting some images. I'm using Blueprint CSS Framework and it happens when I use class="span-XX" and inside it I don't use neither class
Here is some images (click to zoom)
The parent div
The div with problem (no height)
The child div
The parent div has class="span-XX", the div with problem has only #search
which is this one
I suspect it is some float or positioning issue with css but I don't know what it is and how to deal with it. I have also a list containing the social networks on the top of the site which ul has the same problem.
If you have floats inside, you need to clear them. Apply overflow:hidden; zoom:1; to the parent containing the floats and it should resolve it.
If you have negative margins / position + relative and negative offset and cant use overflow hidden use a clearfix... http://work.arounds.org/clearing-floats/
Your child div has the float property set, so the parent div will not expand height-wise to contain it. To get the behavior you expect, set overflow: hidden on the parent div.
Related
I'm working on an interface that utilizes a list of items within a scrollable div, some of which utilize a rollover menu on hover that extends outside of the div. Disabled scripting compatibility is a priority for the site, so I'm trying to see if the interface can be done with only CSS before I start getting into other compromises.
I've got some examples below. The menu in question is on the right side with heading 'select projects'. The third list item from the top in each page contains a rollover menu.
In order to keep the rollovers positioned relative to the their parent when scroll position changes, I positioned the parent li's relative and the child ul's positioned absolute.
EXAMPLE 1
Of course, once overflow:auto is on and the scroll in place, the rollovers are cut off from displaying.
EXAMPLE 2
I tried removing the relative positioning of the parent li's, and retaining the absolute positioning of the rollovers to free them from the div, but then they do not position properly when scroll position is changed.
I can only post two links but if you want an illustration, it's here: eypaedesign.com/markets-rollover-issue-no-relative.htm
With the exception of changing the UI, is there a combination of properties I'm not seeing here that can be used to make this interface work on CSS? I could position the entire div as absolute, and add a large amount of left padding for the rollovers to appear in, but that seems pretty inelegant.
Thanks folks -
With only CSS, you are limited to only one or the other: overflow: auto or overflowing hover-menus. Using separate visible and auto properties for overflow-x and overflow-y doesn't work, so I think your best bet is to go with the padding solution you were considering.
With proper use of absolute positioning and z-index (in case you are concerned about padded menu container hit-blocking any elements under the padding), you should be able to do it without destroying the rest of your layout. You'll have to control the size of all child elements inside the scrollable container of course, so that they don't extend to the full width of their padded parent.
Adding these properties - with no other changes - seems to work on your site, so perhaps you can get away with it easily:
#project_menu {
padding-left: 300px;
margin-left: -300px;
}
.center {
position: relative;
z-index; 10;
}
if you put a height of 293px in your class nav it should be ok.
Or in you project_menu ID, As I can see that ID has a height of 218px and your UL is 293px.
By changing one of those 2 you should be ok. It depends on how you set it affect other element.
But using project_menu ID should be just good.
i have a div element (class "content") that contains 2 divs and a sibling of the first div that has bottom: 0px; attribute and fixed height and i wanted the div with the class "gallery" to expand as much as they don't flow over their parent div.
and also ... i saw that except the firefox browser, chrome, opera and safari shows the search input in the upper right corner 4-5 pixels upper than normal. why is that?
http://goaltod.iulianonofrei.com/
You have 2 questions here.
The first question is not clear, "contains 2 divs and a sibling of the first div", isn't the sibling of the first div - the second div? Also it is not clear what you want to do, in general it seems that you have everything global positioned, so you why not set the gallery div with the exact dimensions you want. For the content it contains you can use overflow:auto so it will create an internal scroller when needed.
For the second question, looks like the problem is in firefox. if you set the top and padding of the input element to 0, it still does align with the containing td element. This is a very odd usage of table elements and I would advise against it... You probably should use div elements instead.
Because you used height: 100% the content will match the height of it parent element. And the other elements push it down.
There are a few ways you could fix this:
Use a table base layout (fully supported, but frowned upon)
Use the new CSS 3 flex box layout (no old IE support)
Put the header and footer in the content, then position them absolute.
I would recommend the 3rd option which is demonstrated here: http://jsfiddle.net/tnRpR/
I know this kind of question get asked everyday, but I don't seem to find a solution to this particular one...
So, the idea is pretty simple, I want to create a 3 column fixed width layout, with 100% width header and footer.
Everything seems to work aside from the footer.
Here is an example: http://jsfiddle.net/xMQLy/1/
So essentially the problem seems to be that, because the main body + lateral columns does not have a fixed height, the footer is not positioned at their bottom.
How would I go fixing that?
thanks
Using absolute or fixed for the position CSS property rips an element from the context of the parent. So, the parent width/height won't be affected by this child's size. The float properties also have this effect: It's not possible to effectively style using position:absolute/fixed or float.
I've thrown away these properties, and revised your code: #Fiddle: http://jsfiddle.net/xMQLy/5/
Some changes:
Thrown away useless CSS properties:
.wrapper{position:relative;top:0}
`.leftcol and .rightcol {floar:right/left}
Grouped together common styles (.leftcol, .main, .rightcol).
Updated HTML source, added a <div class="wrapper-align"> wrapper around each div in the source, and removed whitespace between these wrappers [1]
[1]The .leftcol, .main, .rightcol elements can be positioned next to each other applying display:inline-block on each div. However, the default alignment for these elements is the bottom. Because the columns have to be located at the top, vertical-align:top has to be used. This CSS property can only be used at inline elements. To achieve this layout without messing with float or display:absolute/fixed, an inline wrapper around a display-block element is necessary.
The whitespaces have to be removed, to prevent creating a gap between the elements. To illustrate, compare these pages: No whitespace vs White space.
In my project, I need to implement a container div that should have an unknown (unlimited) width, without breaking to a new line if its width overflows through the browser's window.
The container div has the CSS property of (white-space: nowrap; display:inline;) and the components inside this div has (float:left) CSS property. All widths are set statically. To test the behaviour, i used a button that calls a javascript function that appends a component inside the container div.
The problem is that when the total width of the container div increased to more than the browser's window width, the components inside the container div will break to a new line. I wonder whether it is possible to have a div with unlimited width?
Many Thanks..
The white-space: nowrap property does not apply to floated elements. Simply put, when you float an element to the left or right, there is no white space between them.
See white-space (CSS property) for more information on what white space is and the line that specifically states you can't do this with floats.
Try setting them to display: inline-block so that the parent actually considers them to be content.
Try adding a specific height to the container div, or removing the float: left rule from the components inside the div.
I am trying to stretch div as soon as some text is loaded.I am able to do that by giving min-height:140 px and height:100% to its parent container. But content in my div is crossing its parent container. How can I limit the inner div so that it will not cross its parent container.
Please help me as I am trying for it from so long.
thanks in advance
HP
Use the overflow attribute in your CSS.
#myDiv {
overflow:auto;
}
Depending on the width you assign, this will get the nested div to display a scrollbar once it's width exceeds that of its parent.
Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.
overflow:auto;
Reference
w3schools
css tricks