I have a div main container that contained 3 others div containers.
I want that the 3 child div stay center and always on the same height (at the top of the parent div).
My problem is when I resize the window browser, the child div go under the other. I don't want this.
I also add a css condition for under 768px. In this case, I want that the child div go under the others.
Here a fiddle example: http://fiddle.jshell.net/mCXWs/
In this fiddle the child the blue div go under the green and the yellow under the blue for a window browser above 768px. I don't want this result. I want the stay at the same height (top: 0;)
I don't know what to do ...
Sorry for English, I'm French
3 blocks always of the same height? Use CSS table layout: display: table and display: table-cell (IE8+)
a (block displayed as a) "cell" will never go below another "cell", problem already solved (edit: in the same implicit row)
centered horizontally? Use margin: 0 auto; on container
at the top of parent div? Use vertical-align: top.
under 768px (in MQ #-rule), just override table(-cell) by display: block and divs will behave like default div, going one under another. You also have to override min/max-height, maybe.
avoid overflow: hidden and position: relative (well, with tables...) as long as you can
Working example: http://fiddle.jshell.net/EEEjg/1/
Related
I'm developing a mobile website that integrates horizontal swiping. Unfortunately this has created a headache when trying to get the rest of my website layout to work.
http://jsfiddle.net/N7eWS/4/ - try resizing your browser window fairly small and you'll see the #footer (red) halfway down the content inside #wrapper (green). This appears to be todo with setting height:100% on most of the elements and then the absolute positioning applied to the horizontal swiping div (swipeview-masterpage-1).
I want it so that #wrapper expands to the height of the content, the #footer sits underneath #wrapper and is always off the bottom of the screen (you should have to scroll to see it).
Is there anyway I can make this work without touching (or perhaps making minor changes to) the swipeview divs? Any ideas would be appreciated!
One of the problems is the position: absolute on #swipeview-masterpage-1 and then another absolute on the parent. Parent absolute elements will not expand to the height of any absolutely positioned children (example).
You also have a random <span> in the mix, which is an inline element and will have a height of 0 anyway. Remove that to make things clearer.
Now to why your footer is appearing in a strange way. Your #wrapper will always be 100% of the parent height, your footer will always exist at 100px (header) + 100%. Disable the min-height property and you will see the wrapper collapse, and the footer sit at 100px. That's why the #wrapper content overlaps the footer.
When I resize the browser window my navigation bar div drops below the search box div.
How can I stop the nav bar moving and keep it in the same place? The footer behaves itself and its structured in the same way?
Here's a link...
http://www.signport.co.uk/test/asg_template3.html
Thanks!
This happens because your menu does not have a width specified. Whereas you footer behaves because it has a width specified( div with id footerleft)
I'm testing on Chrome now, removing the width:100% you have set on the navigation bar div (wrapper_menu_full class) seems to do the trick. This 100% refers to its size compared to the containing div (#mainmenu3).
If this still doesn't work on IE7, try setting both divs inside #mainmenu3 to display:inline, although now I'm testing on Chrome it doesn't seem to make any difference.
REPLACE YOUR CSS
#mainmenu3 {
height: 150px;
line-height: 20px;
list-style-type: none;
overflow: hidden;
width: 100%;
}
YOU WILL GET THE DESIRE OUTPUT
You're using floated elements on both divs (searchfilter and menu).
When you are using the floated elements, and the width of the last of the floated element exceed parent's width, it goes moves to the next line (belov).
Put this into your css to make it work as you want:
#mainmenu3{position:relative;}
#search4{position:absolute;top:0;left:0;}
.wrapper_menu{position:relative;top:0;left:310px;}
All I want to do is center some divs on the page. The outer one is a fixed size and is centered horizontally via margin: 0 auto. Inside that div I have a couple images side by side inside another div that wraps to their size. I want to center that div both vertically and horizontally inside the outer div.
It seems like a simple enough thing to want to do, no?
Update:
Let me bit a bit clearer as to what exactly the problem is. I'd love to use the display: table-cell trick to enable vertical-align: middle but the problem is that when I do this, the div shrinks down to the size of its content, thus not offering any space for centering at all, and that div is just stuck up in the top left corner of the parent. I need my display: table-cell block to fill up the available space of the containing div so it has room to center its contents.
Update 2: Solved!
Turns out the problem was that I didn't have the display: table-cell block contained in a div that was set to display: table. I'm not entirely sure how display: table differs from display: block, but it's apparently a necessary step. It appears to be working now!
This might help:
http://www.vanseodesign.com/css/vertical-centering/
My basic layout is a couple of divs within a div - http://jsfiddle.net/nxPhy/ - I'm looking for a css way to have the const div always visible regardless of any horizontal scrolling of the parent div (so only the content div is actually scrolled).
Add position: relative; to container, and remove floats and add position: fixed; to the block you want to fixate.
Result:
http://jsfiddle.net/nxPhy/1/
You want to add:
position:fixed
to the div that you want fixed. Doing this will position this div and it's containing elements fixed.
I've got a HTML / CSS question about growing a div to fit the screen when filled with other divs.
Here's my structure which is inside my "main" div:
I've got 3 divs inside of a container div, with the last div inside the container having an overflow:auto; property (as it has scrollable content). The whole container div is floated left.
How can I get the last interior div to expand with the screen resolution? The problem here seems to be that my container div has no real "size" so when I set it to height: 100%; nothing really happens. Of course this means that if I assign it an actual size, then it won't grow to the resolution..
What should I do?
Have you looked up CSS3 media queries? Here's a tutorial and demo.