So I know there are tons of questions similar to this but I havent been able to find an answer to this specific question.
If I have a two column div layout, I want the div on the left to have a fixed width of 250px and a margin-left: 5%; (just the way I want it setupf for my design)...
the second div (the one on the right) I want to basically go to the end of the screen to the right. So the left div is 250px with a margin-left of 5% and I want the second div (the one on the right) to fill the entire rest of the browser.
On the second div I have tried a float left with a 100% width, but that makes the second div go to the bottom of the first, and fills up the screen. If I give the second div a fixed witdth, of coarse the float works but it doesnt fill up the browser window...and if you move the browser window smaller than the second div, it gets pushed down again to the bottom of the first div...
Is there anyway, with just css, to have one div with fixed width(and margin-left with a percentage), and the next div straight to the right of the first (like a float would normally work) with a percentage of 100% (or something like that) so that it fills the rest of the screen???
o ya I also need both divs to have height 100% if that makes a difference...Thanks!
Write like this:
CSS
.left{
float:left;
background:red;
width:250px;
margin-left:5%;
}
.right{
overflow:hidden;
background:green;
}
HTML
<div class="left">fixed</div>
<div class="right">right</div>
Check this http://jsfiddle.net/ds8Ws/
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/
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.
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.
I am creating a simple 2 column layout for a website, but have struck a bit of a problem. When I add padding to the column which has float:left applied, the float expands past the width I have defined. I can't seem to find an answer for this anywhere.
You have to adjust the width, because when your page is rendered padding is considered as part of the width.
Say you have a div that should be 200px, with a rightward padding of 10px.
.box {
width:200px;
padding-right:10px;
}
Your actual width will be 210px.