How can I make my div the max size of a container? When I try searching it up my self I always find articles talking about max-width.In my website my content area is a div that has 4 items in it and I want to set the width of content area to 100%. To make all the items fit perfectly but when I do this the margin is overridden?
Try placing the following in the style or CSS and see if it works:
box-sizing:border-box;
Related
I am building a web site for home made jewelry. I'd like it nice and centered ( for all those ppl with low resolution ) so all of the titles, navigation and content are in a single div, that I positioned in the center. On the left ( inside the div, everything is inside the div ) I have my vertical navigation sidebar div. On the right I have the title and the content. So far so good. Now to the problem:
I would like my sidebar to have a right border all the way from the top of the page to the bottom ( with 1em margins if possible ). The trick is that my content to the right variate from text to pictures and forms and is quite different on every page - when the content is larger then the screen the screen scrolls and in which case I'd like my sidebar border to scroll down with it - I've not been able to do that.
I think I have done quite a reading - my closest solution was to set the border's position to static but this quite obviously isn't working when the site is centered. So to the question - is there any CSS only way to make the sidebar div's height dynamic or something and define it to expand with the content to the right? This way the border will always reach the bottom.
Wrap your navigation in another div. Give this new div a height of 100% and assign it a border-right CSS property. You can also set padding too. Hope this helps.
How about giving left border to the content section Div, instead of Nav menu. so that way the border could change height according to the content area height
body,html{
height:100%;
}
#wrapperdiv{
height:100%
}
#navigation{
min-height:100%
}
I just made a 100% height div on this page, but (at least in Chrome and Chromium), there are slight top and bottom margins. I want to have the div cover those, but I don't want to resort to using to a specified height, as I'll be using the same set-up across multiple pages.
Do your html, body and div elements all have border:0 and margin:0?
Set border, margin and padding to 0.
I have a div on my page, and I want to make it expand to a certain size and then stop. Right now I have...
div {height:300px; width:700px; overflow:auto;}
The overflow attribute makes it scroll, but until then, I would like it to expand with the content. I have a text box below this and it looks bad with a text box floating down part of the page. Is there a way to have both of these attributes? All of the hits I found on Google were about making it expand to fit the content. Thanks!
Try using max-height.
This will allow you to specify the maximum height the box can be and once it reaches this height it will scroll as you've specified.
Did you mean you want the div to have its height variable, depending on the size of content? Then just give height: auto instead of giving a fixed height of 300px. height: auto will adjust the height of the div based on the content size. Also define max-height property if you want to limit the maximum height the div can extend to.
I have a div (div#slideImage) and within a few images.
But this is not div by adjusting the images inside that div.
See the full page.
Note that the size of the div (width: 75px; height: 28px;) is smaller than the size of the image.
I'm using the plugin jquery.cycle
This probably isn't what you were expecting, but can't you just resize the image? It seems to make more sense to me than expecting the div to do the work for you.
If you specify the dimensions of a div, then contained nodes will either be clipped or scrolled depending on the div's overflow property. Your best bet is to set the dimensions of the div to more useful values.
I am trying to stretch div as soon as some text is loaded.I am able to do that by giving min-height:140 px and height:100% to its parent container. But content in my div is crossing its parent container. How can I limit the inner div so that it will not cross its parent container.
Please help me as I am trying for it from so long.
thanks in advance
HP
Use the overflow attribute in your CSS.
#myDiv {
overflow:auto;
}
Depending on the width you assign, this will get the nested div to display a scrollbar once it's width exceeds that of its parent.
Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.
overflow:auto;
Reference
w3schools
css tricks