This is my example on jsfiddle http://jsfiddle.net/YG6tx/5/
so my question is, why is the red div(pageWrap) not taking the height of it's inner elements?
If I specify a float:left, it takes the height, but the margin: 0 auto no longer holds.
how can I acheive both? (margin:0 auto + the div needs to take the height ).
Do I need to specify the height explicitly?
I'm a newbie, so this question might seem simple.
Designing with floats and absolutely positioned element is hard... Their parent elements won't wraparound them so often you'd have to specify the height attribute on the parent to accomplish the look you want. However, the .topLeft wouldn't exactly need to have the float:left; property. If you remove that I think you'll get the desired look. Example: http://jsfiddle.net/YG6tx/8/
Just give overflow:hidden to #pagewrap.
Try this updated fiddle: http://jsfiddle.net/YG6tx/12/
As in you original fiddle there were no images due to incorrect path of images so in my fiddle also no images but as per your requirement i have changes the layout.
As per your requirement images are at position, red div taking entire height as per elements inside and center also margin:0 auto;
If i am lagging some where please comment so i can change as per requirement.
Related
For design purpose, I need to change the background-color of a div when its child is bigger than it. The parent div has a fixed height:
height: calc(~'100% - 112px');
overflow-x: auto;
overflow-y: auto;
and the child has no height precised so it takes all the place it needs.
The children displays a grid, and when we reach the end of the grid the client believes there's still content that the site didn't load; we need to change the color so it's clear there no data anymore. Problem, the change of color is not nice looking when we do it even if there's not enough data.
As we use less, I was thinking about using a condition, where I could specify that if the height of the children is higher than the parent's height, the background-color is different. But it looks that what I want to do is not as easy as I thought.
Can I check if the overflow is shown to put my condition? Can I do that in pure CSS / Less or do I have to do it in js?
Thanks in advance for your answers :)
I have a strange problem....
Div should expand to 100% of available space by default, but its not the case.
I don't understand what's going on, even if I put display:block it's behaving as automatic width (relative to content).
I appreciate any help.
Thanks in advance.
http://jsfiddle.net/T3arP/
The effect I need to achieve is let the box with green border absoluted or fixed to top of its container, so you can scroll keywords but title will remain there.
When you absolutely position something (that's using position: absolute or position: fixed) width: auto no longer expands it to the container's width. The rules from which the width is actually determined are complicated*. That's why many people consider it a good practice to set a specific width on those elements (absolutely positioned ones, that is).
*you can find out about those rules at http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width)
As has been said, once you absolutely position an element, it loses the parent's tag association in a sense. So you could do something like this maybe.
http://jsfiddle.net/T3arP/1/
G'day,
The simplest example of what I'm trying to do can be found here: http://jsfiddle.net/YxwQW/
How can I expand the red parent div to wrap around it's child div when it's percentage-based width is smaller than the fixed width of the child?
Thanks!
EDIT: Link was wrong, added correct link now. :/
You can set the min-width of the parent to be equivalent to the width of the child. See http://jsfiddle.net/YxwQW/1/ (I also added padding just to make the visual a bit clearer).
You can use "display: inline-block; min-width: 90%;" if I correctly understand what you wanted: http://jsfiddle.net/YxwQW/3/
my page does not want to grow by its content.
please see my fiddle http://jsfiddle.net/msas3/ .
the lightBlue area should set the height for the whole page.
Because your columns are floating, they don't expand the height of parent container and so the pageContainer doesn't fit the height of content.
This problem has been raised many times, here is one of them that do a good job of providing a solution and explaining it:
http://www.codeproject.com/KB/HTML/relatively_simple.aspx
To be honest I think using a table is the simpler solution, with it I can do less positioning and more actual work.
You're being too specific. Don't set height: 100% when you don't need to. It means 100% of the parent's height.
For a simple answer: http://jsfiddle.net/msas3/1/
I removed height, width and min-height on html, body and #pageContainer
(If there is a specific reason you need the height specified please explain that as there may be a solution for it instead.)
I have a page with some divs that have a width of 800px and margin: 0 auto
to center them.
One of the divs contains an image and the rest of the div is empty, in IE8+ it looks
as well as all other browsers, but in IE7 the empty area of the div takes space and throws other elements off their place,
is there a quick solution for making the empty area of the div not take space?
the reason I have to keep the blank area is that the fixed with and margin: 0 auto make
the picture align with the other divs that have the same width.
thx in advance!
Try setting line-height:0 and font-size:0 for that element.
It should make the element occupy no space..
just wanted to tell anyone reading this post, what I did in the end is put an Internet Explorer conditional comment as nothing seemed to solve the problem.
another thing that is possible is to make one of the DIVs' position absolute and then it's
outside the normal flow, but I couldn't find a way to make the empty part of the DIV not take
space in the normal flow.
Yes it does...just put ; after them
I just had the same problem on IE7 and used the answer
line-height:0;
font-size:0;
in the CSS corresponding to that div