I have a css code that has a float property. When i resize the window of my browser, the menus of my webpage are moving down. I already comment-out the float properties, but nothing's changed. What should I do to make it fixed that it will not move down even though I resize my browser?
float got nothing to do with the floating of the div's when the window is resized.
It just ask the div to be aligned to the left,right only if there is space,
what i think you should do is to make wrapper div ID called "content" like this below and add all your inside div elements there,
#content{
width:960px;
margin:0px auto;
}
now inside this div content, if you have 2 div's width 400px and 400px if you set their property to float left they align left, if you set it float right they align right..
if there is no space, like if one div is 400px and other one is 600px even if the property is set to float left they will come as vertical dives as combined width is more than container div
learn more about fix width css design
Related
i'm trying to fix the position of a div while this div's alignment is centered, but when i enter position (whether fixed or absolute) alignment to center is disturbed. what's the cause?
#stage {text-align: center; position:fixed;}
You need to define a width for the fixed-position element. By default it is only as wide as its contents and aligned to the left top.
The way you describe it, probably width: 100% would be the adequate value, which stretches the element across the whole width, in which case the text-centering you applied will be effective.
I've got two divs, the left one holds my content, the right one holds an ad. They're both set to inline-block, and they're in a wrapper div with text-align: center set to keep them centered. This way in the event that the ad div is blocked, the content div is centered correctly on its own.
The problem occurs once I use margin/padding to put a gap in between the divs. I need this so that my ad isn't 1px away from my content. But this padding is retained when the ad is blocked, which means that the main content div is shifted to the left by half this padding amount.
I've tried padding-left and margin-left in the right div, and padding-right and margin-right in the left div. It looks like adblock is setting the div width and height to 0 to hide it, so the padding remains.
All help greatly appreciated!
You should the margin/padding you want on the ad itself (I am guessing an img) rather than its enclosing div container. This is because AdBlock will remove the img (but not its parent div) from the DOM, taking its styles along with it.
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.
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 trying to have the following markup:
body
#container
#content
where body is full width and has a background snapping to the bottom right.
where container has a set width of 960px and min-width of 600px, located in the top left corner of the page.
where content has a set width of 600px and is also located in the top left corner of the page. with a margin "100px 0px 0px 100px"
When I try to do this, the body looks good with a background-attachment scroll positioned bottom right. However, when the browser is resized to a width of less then 960px (or any other width of the container element) the body stops at the width of the browser, leaking the subelements out.
I would like to have the body always be at least the width of the subelements, instead of it breaking. I have no elements floating, which could break up the page, so I don't see why it is behaving this way.
I've made a sort of solution over here:
jsFiddle
Put the min-width on the html element, not the body. Then if the viewport is too small, the background-image will move out of the viewport and is visible when you scroll.
Is this what you want?