I have a DIV which will contain the content for a website of mine. On the left side there is a menu which has its position set to float. When I re-size my browser the container gets under the box and it looks quite bad.
This is how it looks like:
I have tried to put all the relevant HTML and CSS in this fiddle: http://jsfiddle.net/Dugi/qZ67C/
How would I make the DIV container have itself getting smaller against the floating menu and not get under it?
You can set the .container to float left, and then increase the margin-left until it is out from under it. You could also shrink the width of the .container. Both worked while I was playing with the fiddle, but you'll have to adjust your table.
Here is the fiddle, with .container floated left, and a margin-left big enough to slide it out.
Here is the fiddle, with a smaller .container width.
The challenge is that you have percentage width on .sidebar, but also a min-width.
One solution is to place a min-width on .outer. This will prevent .content from slipping under .sidebar. as it down-sizes, but will cause .outer to overflow the viewport and induce a scrollber when the viewport is sized below 750 (minus .outer margin) pixels.
Here's your fiddle with the simple change of setting min-width on .outer to 750px: http://jsfiddle.net/qZ67C/5/
Related
I have a div near the bottom of my page that I want to extend all the way to the very bottom edge of the window so that the background color of the page can not be seen below it. Initially, depending on the size screen that the page was rendered on, a small sliver of the background color was still visible below the div. By adding
html, body, .wrapper {
height: 100%;
}
to my CSS ("wrapper" being the class of the div in question), I fixed that issue, but now the div has a height of around 500px (it varies based on the window size) despite the only element in the div having a total height of 132px (which does not change regardless of window size). Because of the positioning of the div, this 500px height makes the page stretch and now there is a large blank space at the bottom of my page, underneath the content inside the div.
I used Chrome's developer tools to inspect the HTML, body, and div tags and there is no strange padding/margins and no defined height (other than the "100%" that I set). If you'd like more code I can gladly provide more but since I don't know exactly what the problem is I didn't know what would be relevant (plus I'm using bootstrap so finding all of the relevant CSS can be a pain sometimes). Thanks in advance.
You can use flexbox to have the .wrapper, or .table in your example, div fill up the remaining height.
For the parent element (in your example, body) set display: flex; flex-direction: column;
For the element that you want to expand (.wrapper or .table) set flex-grow: 1.
Your Example Updated: https://jsfiddle.net/754s67ur/2/
I have updated the fiddle you posted in the comments to add background colors and removed paddings and margins to better visualize the problem here.
What you need is the CSS calc function to have your .table div take up 100% of the page MINUS the nav and body content of your page (represented by the <p> in your fiddle).
In the fiddle they are both 18px, so combined it's 36px and that is what I need to minus from the 100%. So the style would look like this:
height: calc(100% - 36px);
This is how you calculate the remaining space. But this only works for static height elements. Here is a fiddle of the solution.
I'm modifying a responsive Wordpress theme. At smaller viewport sizes, there is ~10 pixels of space between the edge of the main wrapper div and the right edge of the viewport. Take a look: http://bit.ly/1mt2s0D
How do I make it go away? HTML, body, and wrapper divs are all set to 100% width. Padding and margin are set to 0.
Other people have had this issue, but their solutions haven't worked for me. Here's one: Can't get a div background colour to fill full width of viewport.
Thanks.
Your div .topright has a padding-right set to 5px which is pushing it out past the bounds of the wrapper. At smaller viewports it is 5px wider than everything else.
I have my website that is 1000px wide and centered. I have a div, inside the centered 1000px div, that is 500px left and 700px width. The div overflows out of the 1000px div to the right by 200px.
Everything looks great but on smaller monitors the overflowing div creates a scroll bar on the bottom.
Is it possible to mark this overflowing div as something like "do not add to scrollable area"?
I only want the overflowing part of this div to be visible if there is enough room on the screen.
**Added a Picture to help describe the issue.
**Added js fiddle here << had to use bit.ly cause it won't let me post jsfiddle
You should use height and width in percentage. By using this it will work on every resolution and div never get scrolled.
Like
div.body{
width: 100%
margin: 0 auto;
}
Could you let me know what is exactly your HTML DOM structure?
Add this CSS to your overflowing div. Anything that spills out of the div will not show in smaller monitors.
overflow: hidden;
Add overflow:visible; to the div with 1000px width. This will make the portion of the 700px width div to extend to right over the yellow div.
To prevent the scrollbar give overflow:hidden; to the body tag. But if the screen width is less than 1200px, the right portion will get cut. Try this anyway.
I am trying to create a navigation element (nav) that spans the full width of the page, but when the windows shrinks enough where the text overflows, the text wraps. As this is the navigation bar for the page, I'd prefer it didn't wrap and the page just scrolls when the nav's content overflows it. I was thinking giving it a width in pixels instead of just 100% would work, but I don't know how to make it the full width on every screen using pixels. Any idea how to do this? I am using SASS too if that could help with a solution.
Basically, I need a solution that makes a element act as though its width were set to 100%, but it can't wrap the text if there's overflow. The window should scroll if there's overflow.
Put in the css style white-space:nowrap;
If you want a scroll bar in the div, go for overflow:scroll; and set a height of one line, and don't use nowrap.
Full width should be easy: width: 100%
If you want specifics, show us your code.
I think your best bet would be to set a minimum width on your nav element. This way, it will only scale your div to a certain point so it doesn't wrap. The only downside of this is that you need to specify a width, but the upside is it works without any of the div being cut off.
http://jsfiddle.net/piedoom/Km4Xa/1/
You can see in my CSS I have the following:
div
{
width: 100%;
background: red;
min-width: 250px;
}
The min width specifies how small the div can get before it just stays at that value instead of taking the window as it's width.
You can also apply this to the body so it works on all elements.
I dunno what's wrong with my css, but I can see only 50-60% of right border of left sidebar navigation. How to resize it to fit full container height?
Here is the image of sidebar navigation
And link http://www.smiths-heimann.az/?page=2
There is a huge padding-bottom in your container div which is 373px. I guess you have to recheck the design. A quick solution can be to reduce this padding to 354px.
You have a big mess with margins and paddings.
You should remove min-height on #wrap. Remove the negative margin-top on the #footer, the padding-bottom on the #container and just work on the padding-bottom of the .content
try setting you content div to "height:100%"