I'm having trouble wrapping my brain around this one.
How would I go about having a fixed width div, margin:auto, and then on both sides of that div have divs that adjusts their width automatically to fill the rest of space?
Thanks
Appreciate any help
something like this without any container.
http://jsfiddle.net/JuG8W/
HTML
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
CSS
#left{
float:left;
width: calc( 50% - 150px );
background-color:blue;
}
#right{
float:right;
width: calc( 50% - 150px );
background-color:green;
}
#middle{
float:left;
width:300px;
margin:0 auto;
background-color:red;
}
try this jsfiddle it uses simple display property to achieve this layout. It gives you consistent layout even if you scale the width to extreme minimum and you don't have to hard code anything except the width of the center <div> which you can also specify in %.
Update
First fiddle has center <div> width in % which makes it good for responsive design. This fiddle has center's width fixed (in pixels)
Related
I am trying to prevent two side by side divs I have from overlapping in responsive layout.
Here is my html:
<div class="image"><img src="images/misc/libertyXSmall.jpg"/></div>
<div class="storyWrapper">
<div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING
WORKS ON THIS NEWS LIST PAGE!</div>
</div>
Here is the CSS:
body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}
.mainContainer{float:left; height:auto; width:100%; max-width:800px; }
.image{float:left; margin-top:0px; width:14.25%; height:auto;}
.storyWrapper{float:left; width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; }
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;}
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;}
The link to this page is: http://www.rebelplanetnews.com/newsMenu3.html
As you can see, my issue is.. the text div to the right overlaps the image div to the left on page resize (smaller). I need to prevent that.
The answer is not to use a percentage for your headline. The simplest solution is to use the calc value, which can be used in all modern browsers.
The following will work:
div.storyWrapper {
width: calc(100% - 114px);
float: right;
}
Here, I have noted that the width of the image is 114px, and set the width of the container to 100% minus that.
I have also floated the container to the right.
Note that calc is a little bit fussy. In particular, you need spaces around the - operator: calc(100%-114px) will not work, at least not in all browsers.
The problem is that your actual image isn't shrinking when the .image div is. So .image div will adjust according to its width percentage, but not the image contained within it. If you add a width: 100% to the img element, the image will now shrink along with the div container, and the text div won't overlap.
I have a problem with something that seems very simple.
Here's the deal.
I have a div at the top of my page which takes the whole width. Below that i want to place a div with a fixed width aligned in the center.
Something like this:
<div id="top">
<p>This is the top wrapper</p>
</div>
<div id="middle">
<p>This is the fix width wrapper</p>
</div>
Style will be
#top {
height:100px;
background:red;
width: 100%;
}
#middle {
width:900px;
margin:auto;
height: 300px;
background:green;
color:#fff;
}
DEMO:
http://jsfiddle.net/JeroenGerth/zeZ4k/2/
If the browserwindow is larger than 900 pixel, everything is fine. But there is a problem when your window is smaller than 900 pixels. You get a horizontal scrollbar. That seems logical, since the #middle div is 900 pixels wide. But when you scroll to the right, you can see the top div doesn't fill the entire width of the screen. It only fills the space you can see before you scroll to the right. You can see some white leftover space at the top right corner of the page.
What am i doing wrong or overlook? Do i can't use a fixed width for the #middle div? :-( How do I get the top div fills the entire width when the windows needs a scrollbar?
Thank you for your help.
Either set max-width: 900px; on #middle or min-width: 900px on #top
http://jsfiddle.net/zeZ4k/3/
That because the first div takes 100% of the body, witch can be smaller then 900px.
set
#top {
height:100px;
background:red;
width: 100%; /*Not needed - this is the default behavior*/
min-width: 900px; /*set this*/
}
I am trying to align two divs horizontally and I got it to work using display:inline-block
however when I put overlfow-x:scroll to the main container it doesn't work. If the screen is smaller, one of the div goes to the bottom. How can I achieve this? I don't want the second Div to go to the bottom if the screen is small.
Here's fiddle
<div class="container">
<div class="test1">test1</div>
<div class="test2">test2</div>
</div>
.container{
display:table;
margin: 0 auto;
overflow-x:scroll;
}
.test1{
background-color:red;
width:500px;
margin-left:16px;
display:inline-block;
}
.test2{
margin-left:40px;
display:inline-block;
background-color:gray;
width:80px;
vertical-align:top;
}
give parameters to width and height, so container can overflow.
http://jsfiddle.net/f5HWD/3
.container{
width: 900px;
height: 700px;
display:table;
margin: 0 auto;
overflow:scroll;
}
I altered your code slightly and made the contents float left.
In order you get it to work, you just had to create a wrapper class. You need the outside container to be large enough to just fit your test divs, while the wrapper is large enough to hold both combined. This should be fairly easy to figure out and edit according to the heights/widths that you want the divs to be.
Fiddle
Hope it helps.
I need to get the fixed margin to the right and left side using a wrapper inside an absolute div (it should work with relative, but I'm limited). Here is the graphics of the desired result using different screen resolutions:
what I am currently getting to work is the left "50px width" margin, but the right "5px width" seems like it's not working.
I've heard that for some things javascript can be helpful, yet I could not find implementations of this kind.
CSS:
.main_wrap{
width:100%
position:absolute;
}
.div_contener {
position:absolute;
height:400px;
border:1px solid blue;
left:50px;
width:100%
margin-right:5px;
width:100%
}
.div_sub_wrapper {
position:absolute;
width:100%;
}
HTML:
<div class="main_wrap">
<div class="div_sub_wrapper">
<div class="div_contener">
<p>sample words</p>
</div>
</div>
</div>
Fiddle
The other thing is that if I use a fixed with size for the contener class, it should not get scrolling like it does now with this 100% width.
You can specify a left and a right css. If the width is auto it will fill the space:
.div_container {
left:50px;
right:5px;
width:auto;
}
http://jsfiddle.net/uxNzF/1/
I want to make a web page that uses 100% of screen space. I have two divs:
1st - menu with fixed width (~250px)
2nd - whats left
The misleading part for me is that the menu div is not in the 2nd div. They both are in a wrapper div (100% width). The problem is that if I write 100% width for the 2nd div, it goes below the menu. If I write less %, I cannot be sure how it will be displayed in smaller resolutions.
Is there is some negative sizing or something? ATM. 1st div floats left and 2nd div float right.
UDPATE: here is some code:
div.main {
width: 100%;
}
div.1st {
width: 250px;
float: left;
}
div.2nd {
width: 100%; #here should be the space that is left in the main div#
float: right;
}
<div class="main">
<div class="1st">menu</div>
<div class="2nd">content</div>
</div>
Problem: content could be as wide as it needs to so if string or objects in it is big enough 2nd div goes below 1st. Menu width is fixed.
UPDATE #2: if i leave content width empty then it will also goes below menu since content is wide enough
Take a look at this Post, there you have the correct solution:
http://www.alistapart.com/articles/holygrail
You could do something like this : http://jsfiddle.net/steweb/78x8y/
markup:
<div id="container">
<div id="left">Width=> 250px, float left</div>
<!-- following div takes automatically the remaining width, no need to declare further css rules -->
<div id="remaining">Width => the remaining space</div>
</div>
css:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#left{
float:left;
width:250px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
Yes, you can determine the width of absolutely positioned elements by setting left and right. This makes the browser solve the equation in the standard for width. See this demo for an example.