The setup:
I have a sidebar and a main content column. The sidebar has a 33% width and the main content has a pixel width that fills the rest of the space. I want the main content to stay at its fixed width until it reaches a certain media query break-point and gets smaller. So basically I want just the sidebar to be shrinking as the window resizes until the break-point.
This sounds like it should be simple to me, but I'm having issues. When I shrink the window, the sidebar doesn't shrink fast enough and the main content drops down underneath it. I suppose this is because since the main content isn't shrinking, its px width is taking up a higher and higher percentage of the screen, whereas the sidebar is just taking 33% always.
I feel like there is some easy solution but I can't come up with it. Any ideas?
Thanks, gals and guys
Overview
If you make your content box 67%, and comment out whitespace between div's it should work.
I also added box-sizing:border-box; because then you can add padding and it won't add onto the total width.
This does NOT apply to margin, you must use margin percentage so that the margins+widths =100% if you want it to fit correctly with margins.
The background colors are only to showcase what the div's look like.
Here is an example: http://jsfiddle.net/ZZwbF/
HTML:
<div id='container'>
<div class='sidebar'>
Sidebar Test
</div><!--
--><div class='content'>
Content Test
</div><!--
--></div>
CSS:
.sidebar
{
display:inline-block;
width:33%;
box-sizing:border-box;
background-color:#09f;
}
.content
{
display:inline-block;
width:67%;
box-sizing:border-box;
background-color:#0F9;
}
I figured it out.
I just had to stop trying to fill the whole screen. That's pointless considering people have bigger screens than me. So instead of having a right margin on the content (which I didn't mention) to make it fill the remaining space, I floated it left. Now I'll put a max-width on the sidebar, and make media queries for when the resize catches up to the content box.
Related
I have two divs horizontally aligned that will wrap (their size gets smaller until the wrapping occurs at some point) when resizing the browser window. The problem is that these two divs won't automatically fill the gap they leave behind
Both have width 48 %, min-width 400px and are floated to left in a div container
Example
DIVCONTAINER
DIV1 ==> There's huge space on the right side because div1 won't auto-stretch after wrapping
DIV2 ==> There's huge space on the right side because div2 won't auto-stretch after wrapping
Is div auto-stretch even possible when wrapping takes place with resizing?
EDIT:
Here's a demonstration of the problem
JSFiddle
<div class="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
.div1, .div2 {float: left; width: 50%; min-width: 400px; height: 100px;}
.div1 {background:red;}
.div2 {background:blue;}
Floated divs will not be able to dynamically occupy the remaining width of a container - they are no longer part of the normal layout of the document.
You can achieve what you're looking for by removing your floats, and then using
table display properties, or
flexbox (if you don't need to worry about <= IE9)
CSS-Tricks' Filling space in the last row will guide you in the correct direction for the flexbox solution.
May be it's because of min-width:400px
If you resize the browser below 800px, that width 48% will not work because of min-width:400px
If you want to wrap both divs into wrapper then wrapper should have 800px or higher than 800px width.
Play with fiddle you will come to know what is happening...increase wrapper width to 800px...
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/
I'm stuck with this rather odd problem that occurs whenever I place an image in one of my fluid grid layout columns. When the width of the page is anywhere above 400px, the width of the page is calculated properly. But when I shrink it down to below 400px wide, then the page stays the same width and you have to scroll left and right.
The problem even persists when I set the width image's container to, say, 50%. The image and its container shrinks, but the div that contains the image container still expands beyond the width of the screen. If I set display:none; on the image, or remove it altogether, the problem goes away and the width of the page fits the screen correctly.
Thanks!
The page: http://cdhinternational.org/index3.html I'm having trouble with the image at the bottom. (The Responsive Design Mode in Firefox is a great way to reproduce the problem. Just set it to 320x480px.)
You need to set the width of your content-container.
#content-container { width: 100%; } should do.
P.S. any particular reason the content-container is floated left? If you remove float: left; from the content-container that should also do.
I want to know how this theme gets the effect of the items in the lower right disappearing as the screen gets smaller.
http://themeforest.net/item/jr-photography-wordpress-theme/full_screen_preview/1163891?ref=takeaction
I have items in the lower right but when the screen is too small They move down instead of disappearing like this. Any comments or links how to get this effect would be great! Thank you.
Not media but rather CSS floating solution
I haven't checked source code of the particular site, you're linking, but I've created a simple CSS solution that hides right-hand side elements when there's no more space for them because of the left hand side elements.
Here is a JSFiddle. Resize the window width (or drag the columns in to resize content quadrant width) so the two elements become too wide for the container width. The right-content will automatically disappear.
What it does?
You have footer container with two additional containers, floated left and right. All three of them must define the same height while:
footer defines overflow: hidden so anything that goes beyond lower visible viewport will not be displayed.
other two are then just floated within to left and right
Floating then makes care of everything. When there's not enough space to accommodate floated elements by with they start to render underneath where there's enough space. But displaying underneath hides them because container element has a limited height.
<div class="footer container">
<div class="left container">left content</div>
<div class="right container">right content</div>
</div>
And simple CSS (including just relevant settings):
.container {
height: 2em; /* all containers have the same height */
}
.footer {
overflow: hidden;
}
.left {
float:left;
}
.right {
float: right;
}
I'll try to explain this as best as I can ;)
Basically, I have a sidebar <div id="sidebar"></div> which is floated to the leftside and has fixed position. I planned to have another div just after it that will contain the content, but the problem is that, because sidebar has fixed position the div that I expect to be after it (to the right side) is appearing behind sidebar. This is an issue, because I need to use margin-left: 310px (310px is a width of sidebar) to make another div appear after the sidebar, so instead of occupying 100% width left on the page without a sidebar's 310px it occupies full page and causes align problems.
It's hard to explain, but if you visit my page http://freshbeer.lv/development/en/ you can see white div, it has margin-left: 310px; and width: 100%; inside it there is a grey div with width:700px; and margin: 0 auto;. I expect grey div to be aligned in the middle between 2 images at the background, but as white div is occupying more space than needed it doesn't happen. Could anyone suggest a solution please?
Maybe I am misunderstanding your question, but in #container you can either remove width: 100% or change it to width: auto.
The problem is that it is getting the width of the parent container (which if you go far enough back is taking the width of your browser window) and then adding the margin. So it is 100% + 310px. Hence the reason it is 310px wider than your browser window.
Try this. First, make sure that your side bar is first in your script. Then, do not set the width of your main section. Instead, just say display:block. So something like this:
<html>
<body>
<div style="width:310px; float:left; background:#dddddd; height:500px;"></div>
<div style="margin-left:310px; display:block; background:#ff0000; height:500px;"></div>
</body>
</html>
In the above example, the top div is your side bar, and the second your main body section. I just added the heights so I could see the columns during testing.