I have a wrapper div with a max width of 700px and the only content is an right-aligned image of less than 700px width. Since it doesn't fill it, the wrapper doesn't expand to 700px. How can I make the wrapper expand to the full width when there is space in the browser window? The only hack I have found so far is to also include a zero height span with more than one line of text in...
A div should by default expand horizontally to the width of it's parent object. Try setting a width on the div to 700px.
As CRasco mentioned, a Div will normally expand to fill its container, until we come along with some fancy style and screw that up. Here are the styles I can think of off the top of my head that will prevent a Div from expanding to fill its container:
These will make it the smallest size needed to hold its contents.
float: left;
float: right;
display: inline;
display: inline-block;
And, of course, any of these would set or restrict the size of the Div. I'm betting you'd have noticed if these were causing your problem, but I thought I should include them to be as complete as possible.
width: 100px;
max-width: 100px;
height: 100px;
max-height: 100px;
You can set overflow: hidden on the 700px div, assuming that you are not setting an explicit height.
If you know the with of the image you could add a margin to it.
Related
I put a div in page, or anything in page and it automatically expand its width to the end as if I set the width 100%. Obviously I need to set a width value (like 100px) for the thing but I just want it to be as wide as the content, not a fixed one. The longer the text is, the wider the content should be. How do I handle this? What's wrong?
By default, a width of auto tells block elements to expand to the entire width of the parent element. You want either display: table or display: inline-block for it to shrink down to the width of its contents.
You can see display: table in action here:
http://codepen.io/cimmanon/pen/FvGxl
You need to set:
width: auto;
display: inline-block;
is it possible to have a div (or other element) resize its height in relation to its width (or the other way around) using CSS? basically, to get it to behave the way an image with a percentage width resizes proportionally as the browser window is resized?
If you want to set a width or height relative to a .parent element and you know the aspect ratio that needs to be maintained, you can do something like this:
.parent{
width: 150px;
}
.child{
width: 100%;
padding-top: 50%; /* outer height will be 75px (150px*0.5) */
}
Note that you are relying on having a height (or width) of 0 and defining it based on the padding only. So, if you want to add any content you will probably need to wrap it within an absolutely positioned div within .child. See this fiddle for an example
Look at this related question. In short: No, it's not possible using only CSS
On this page, I want the main content div - which has an id value of container - to be horizontally centred on the grey background. However I want the black login panel to remain stretch across the entire width of the screen.
In an effort to achieve this, I added the rule:
#container {
margin: 0 auto;
}
But it doesn't work, what am I doing wrong?
Update
Thanks for the answers. It was suggested that I fix the problem by removing the max-width from the body and setting a width on the container.
This centres the container, but causes it to occupy all the available horizontal space. What I want is for the container to be centred with a width of (say) 900px, and the grey background should appear in the "empty" space on the left and right of the container.
you need to specify a width, otherwise the margin won't know how to centre...
like this:
#container {
width: 960px;
margin: 0 auto;
}
EDIT:
Also, remove the max-width on your body!!
The issue is that you have max-width: 960px; on your body element. Non-absolute elements will not size past the boundaries of their parent element.
You should instead be setting max-width (or better width) on the #container element, otherwise the div will automatically size to 100% as it is a block-level element.
I'm trying to have a background image repeat x and y to the bottom of the page.
The background image pattern div is
#pattern {
height: 3000px;
width: 1000px;
background:url(../images/patterns/pattern1.jpg) repeat;
}
In the html, it resides inside
#wrapper {
position: relative;
width: 1000px;
margin: 0 auto;
text-align: left;
}
The height on #pattern is set to 3000px just so it will show up, otherwise the image will not appear.
I have tried various things such as:
height: 100%;
min-height: 100%;
overflow: hidden;
overflow: auto;
I would like the background image to repeat to the bottom of #wrapper, to the bottom of the page.
Webpage is here:
Thanks so much.
You've set a fixed height on the wrapper, so it'll stop at 3000px, regardless of how much content is in there. Try a min-height instead. That'll keep it at a minimum size so it's visible,but allows it to grow to fit the content in it.
Try giving the #pattern a position:fixed; so it doesn't matter how much content you have to scroll, it won't scroll itself.
Side note: repeat is the default property for background image so no need to declare.
Your HTML is wrong. The #pattern div should contain the rest of the page. You want it to grow with the contents.
Your interior divs are all absolutely positioned, making it impossible for them to influence the height of the container #wrapper, which is where you'd want to put your background image code.
Also, I'm not sure if this is intentional, but #pattern doesn't wrap any of your content, so it's height has to be manually set, since it has no children.
There are two approaches you can take. Use Javascript to determine the combined height of your absolutely positioned divs and set the height of the pattern to that number.
Or, you can use float to arrange your columns, and put a at the end to force the parent container to be that tall.
The div tag containing the #pattern style should start on the first line after the body tag and close at the end of the page just before the close of the body tag.
BTW, remove the height and width attributes or set it to 100% so that it repeats throughout the page.
Newbie question here. I have a #wrapper as my main container. Like so:
#wrapper {
margin: 0 auto;
padding: 0 20px;
width: 960px;
height: 100px;
}
My question is: what is the actual width of the wrapper now? 960px or 1000px? Let's say I want to have a #header inside the #wrapper. What should the width of my #header be, assuming I want it to be the width of the #wrapper?
The width of the wrapper in your example is now 1000px. Padding is added to the width, wheras Margin is not.
If you put a header inside the wrapper, you would want it to be 1000px to stretch entirely from side to side, but that would be impossible because of the padding, so your header would still have to be 960px.
Heres a JSFiddle (Sorry, just discovered this today!)
http://jsfiddle.net/wGYfR/8/
The outer width is 1000px and the inner width is 960px. So if you want to put inside the wrapper it should have width <= 960px
The wrapper is still 960px. However, you have added padding of 20px on both sides meaning for 20px on both sides there will be only white space. The usable area is now 920px.
You don't have to set the width of the header. If you don't it will fill the whole wrapper element (minus the padding). You header will end up being 920px.
I suggest firebug This will help you so much. Seriously.
The actual width would still be 1000px. You can set a background color on your #wrapper to see that the width will still be 1000px.
CSS Box Model Illustration http://img405.imageshack.us/img405/3402/boxmodel.png
If you use Chrome or Safari (or firebug with Firefox for that matter) you can easily check out the width of an element, and how padding and margin in affecting it.
The width should be 960px, however only FireFox adds the padding to the width.
To fix this, put the following code on top (or at least above all div selectors) of your code:
DIV { /*let Firefox stick to the web standard concerning padding*/
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}