I am coding a two column layout, (980px width in total) which will have the background of each div in the columns expanding all the way to left/right side, see screenshot.
So on the left I have a blue div with width: 49%, inside it is div with text, which should expand to 470px (to keep the text aligned in overall max-width: 980px div), and scale down when the viewport is getting smaller (screenshot).
Is there a way of keeping the div expanded like on the screenshots from photoshop but also aligned right in the parent, blue div? What I am getting with float:right and max-width: 470px is this :(
So basically, you want to right-align your div inside the blue div.
Use this :
HTML
<div id="someid">
<p>Some text here</p>
</div>
CSS:
#someid {
margin-left : auto;
margin-right : 0;
}
Related
Consider the following HTML:
.top {
min-height: 150px;
}
p {
margin: 50px;
}
div {
background-color: #eee;
}
<div class="top">
<p>Welcome</p>
</div>
<div class="content">Main content</div>
You can see it in action here:
http://jsfiddle.net/Lp4tp/1
Question
In Chrome(for Ubuntu), it appears that the margin defined on the p tag causes spacing between the top div and it's surrounding elements, instead of expanding the top div and producing the equivalent of adding 50 pixels padding on the top div.
Is this correct behavior? And if so, how can I ensure that child elements inside the top div cannot create undesired space between the top div and the content div.
Note
If I use a fixed height instead of a minimum height, the spacing between the top and the content div vanishes, but the top still produces 50 pixels of white space above itself.
Your margins collapse. Fix with overflow:auto on the div:
div {
background-color: #eee;
overflow:auto;
}
jsFiddle example
Top and bottom margins of blocks are sometimes combined (collapsed)
into a single margin whose size is the largest of the margins combined
into it, a behavior known as margin collapsing.
You could also add a border to the div for the same result.
add to p
display:inline-block;
Let's assume the following html markup:
<div id="container">
<div id="inner"></div>
</div>
I would like the inner div to be centered in its parent (container) while if there is not enough space in the viewport, it should gradually go to negative left margin upto -XY px.
The situation is:
I have a container div that always has a plain background. In this div I have another div that has a ribbon as a background and contains the navigation. If the viewport is wide enough, I want to show everything (=from the inner div) centered on the page. So far no problem by setting margin: 0 auto to the inner. However, when the viewport is less than the ribbon's width, I would like to "cut off" the ribbon on the left side (logically, on the right it is automatic) to the point where it "bends", that's the point where the buttons of the navigation begin (169px from left). I have come up with this:
#container {
height: 240px;
position: relative;
background: url("../images/top_noise_bg.png") top left repeat #222;
margin-left: -169px;
margin-right: -169px;
}
The margin works as intended when the viewport is large enough. When it is too small, the left side works just right, however the negative right margin cuts the *top_noise* background off on the right side when I scroll there. Also it creates another undesired effect: the page will always have horizontal scrollbars. Any advices how to solve this? Thank you!
jsfiddle example -> resize the area to very small, then scroll to right of the red div.
I have simple HTML and CSS as following. I notice the bottom margin collapse between .outside box and .inside box. I don't understand why i can't see the background image when bottom margin collapse, background image should nothing about margin.
Thanks :)
<div class="outside">
<div class="inside"> content </div>
</div>
.outside {background:url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat; padding-top:1px;}
.inside { background:#00CCFF; margin:0 0 10px 0; padding:0 0 20px 0;}
You are experimenting vertical margin collapse between your nested divs
Include this overflow property (any value not equal to visible will do the job), and it will work ok
.outside {
background:#ff0000 url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat;
padding-top:1px;
overflow:hidden;
}
The red color was added only to test the result. Of course you can wiped.
Detailed comment
Your outside div uses a sort of yellow strip at its left bottom.
Your inside div has a bottom margin of 10 px and as there is nothing in between this margin and the outside div bottom margin. Thats why they are collapsing.
You could prevent this to happen including a bottom padding or even a bottom border to outside div. But this would change your design intentions.
That is why I suggested using the overflow property which also prevents the vertical margin collapse and does not interfere with your design.
In this fiddle I added a left margin to the inside div and a red background to the outside div.
For didactic porpouse I also included a transparent background to the inside div.
Vertical Margins collapsing
Prevented by overflow:hidden
Play with it. Delete the overflow property and watch vertical margins collapsing.
I hope is clear enough for you.
Have a good day and enjoy your coding :-)
I have a slider, with a div that contains the controls previous, start/stop sliding, next.
I set "text-align" to left, center and right, respectively, and display to "inline". I have no idea, now, how to fill the whole width.
Here is the markup:
<div id="external_promo_controls">
<div id="promo_previous"></div>
<div id="promo_auto_controls"></div>
<div id="promo_next"></div>
</div>
And the CSS:
#external_promo_controls div{
display: inline;
}
#promo_previous {text-align: left;}
#promo_auto_controls {text-align: center;}
#promo_next {text-align: right;}
I guess I could have it done with floating elements, however I got quite a mess trying to have a correct combination of elements being on one line and centering the element in the middle. I’d like to avoid positioning elements with pixel value, since it would break as soon as I change text, font, or size or the container, which are all events that will eventually occur.
simple to use floats - this fiddle should set you on the right path:
http://jsfiddle.net/Q4paq/
New example with DIVs containg a link with a hover state.
http://jsfiddle.net/Q4paq/1/
try this. I am not sure it will work or not but suppose all three inner divs has width of 100px each then
outerDiv specify the width to be 300px with no margin and padding
innerDiv width:100px and margin and padding are 0px and float : left.
if you want to specify margin and padding then summation of all three innerDiv's width + padding + margin + border * 3 should be the width of the outer div.
I have to create a div that has a paper texture to it, with rounded corners. When the content inside grows, this div should grow along with it and not ruin the bg..
So to do this, I made the main div with the content, and made it repeat the center of the bg and set the height to auto. I made a div for the top and bottom parts of it with the textures and rounded corners. I used absolute positioning relative to the content div so when it grows, the bottom bg will be below the content div at all times.
Everything looks good BUT, the top and bottom divs are covering the content div. I can fix this by leaving a large gap at the top and bottom of the content div but it looks strange having such a large gap.. and its improper.
Any ideas around this?
Try adding a margin to the top and bottom of the content div (ie. margin: 20px 0 30px 0; where 20 is the height of your top div and 30 is the height of your bottom div). Also, can't you just put the three divs in a container and position them relatively, one stacked on another?
Example:
<div id="container">
<div id="top"></div>
<div id="content"></div>
<div id="bottom"></div>
</div>
It´s hard to say without looking at your code, but I think your problem can be easily solved by adding a top and bottom padding to your main div, the size of the top and bottom parts.
Edit: An alternative would be to put your content in another div in the main div and abandon absolute positioning. Just put all three divs one after the other and use negative margins to pull the content up over the top div and do something similar for the bottom border.
Use z-index: http://www.jsfiddle.net/xPEY6/
(Per the CSS spec you don't actually need the .text div, you could set .top and .bottom to z-index: -1 and .container to z-index: 0, but I wouldn't rely on all browsers implementing that detail correctly.)
You can do this with positioning:
div.paperTexture {
position: absolute;
top: 0px;
bottom: 0px;
}
Also works well if you need the div to take up 100% of the viewport minus Xpx. Just set the top or bottom to Xpx.