I have a very simple layout with 2 DIVS: a fixed width left bar and a right area which should take up 100% of the remaining width. Both are 100% height, and I want the right item to have a vertical scroll bar if the height is taller than the window height.
My current code takes up the whole browser window, but the right area scrolls way off the browser viewable area to the right, and there is never a vertical scroll bar visible.
HTML:
<body>
<form id="Form2" runat="server">
<div class="page">
<div class="clear hideSkiplink">
Left side stuff goes here....
</div>
<div class="main">
Right size stuff goes here....
</div>
</div>
</form>
</body>
CSS:
div.hideSkiplink
{
padding:20px;
background-color:#990000;
position:fixed;
top:0px;
left:0px;
width:249px;
height:100%;
}
div.main
{
padding: 10px;
margin: 0px;
background-color: #000000;
color: #ffffff;
position: fixed;
top: 0px;
left: 250px;
width: 100%;
height: 100%;
}
When you give something width:100% it means 'whatever the width of my container, I will have the same width' -- it does not mean 'I will take up 100% of the available space'
In other words, let's say your parent DIV was 300 pixels wide -- if you give the child div width: 100%, it will be 100% of 300 pixels.
What you can do here, since your left column is fixed width, is add a left margin to the right div.
div.left
{
width: 249px;
}
div.right
{
width: 100%;
margin-left: 249px;
}
Some times you need to set the margin in the body in the CSS to 0.
EG.
body {background-color:#000; margin-left:0px;}
Cause by default some browsers have couple of pixel padding on the left hand side.
Instead of having the wider area fill up space, why not just make the left bar absolutely positioned and the main content <div> the fill up the whole page, with a padding-left to shift over the content?
A div with 100% width will fill the container it is in. Your container is 100% the width of the page. It doesn't take into consideration the fact you shifted it 250px to the right with absolute positioning.
your best bet:
.hideskiplink should come after .main in the flow. Float .hideskiplink to the left, give it a width, and then give .main a margin-left matching the width of .hideskiplink.
I've fixed my issue with this by setting the min-width to the 'body' to the same value as the width of my content within that div.
Related
I've a fixed width <div> positionned inside the body element with float:right. When I resize the window and the width of the <div> is below the width of the window no scrollbar appears.
HTML
<body>
<div>Some text content inside.</div>
</body>
CSS
div{
background : blue;
width : 400px;
float : right;
}
It's the same if I change float:right by position:absolute; right:0;.
If I add body{overflow:auto;} it's still the same.
My questions are : Why this behavior? and How can I change it?
http://jsfiddle.net/Sk7Qh/
You can never scroll further to the left than the left edge of the document (or further up then the top edge).
Content, however, can be positioned there.
This is what is happening and you can't change it.
The closest you could come would be to set a minimum width on a containing element so that the content is never positioned off the left or top edges.
e.g.
body {
position: relative;
min-width: 300px;
}
Update after comment from OP:
Then you just use an outside box around your div
<div id="outside">
<div id="inside">
Text
</div>
</div>
And CSS:
#outside {
max-width: 100%;
overflow-x: auto;
float: right;
}
#inside {
background:blue;
width: 300px;
}
See http://jsfiddle.net/Sk7Qh/6/
Better?
I have 2 div inside a fixed-width container.
div1 has a dynamic width, with a maximum of 50%. I want div2 to fill the remainder of the containers width.
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
Here's an example on jsfiddle.
Fully expanded as supposed to: http://jsfiddle.net/RuD74/
Containers background visible due to right not expanding: http://jsfiddle.net/hgpcp/1/
How can I achieve this?
Updated JFiddle: http://jsfiddle.net/d5U96/2/
I see what you are trying to do. Instead, set the second div to have:
#right {
overflow: hidden;
height: 100%;
background-color: blue;
}
By doing this, it takes up all available width that's left except for the space occupied by the first floated div. Hopefully this does what you need.
A other thing that you can use it that you set the minimum width of your red/left box to 50%. This depends on what you would like to do with it.
#left {
float: left;
min-width: 50%;
max-width: 50%;
height: 100%;
background-color: red;
With this your div1 gets the minumum width of the helf of your block.
The only negative thing about this is, that you can't make it smaller in time, if you'd like.
I have an element (in my case a HR tag) that needs to be as wide as the browser but which is also wider than it's parent container. However, it still needs to maintain relative positioning so that it scrolls vertically with the page. The problem is that my parent div has to have relative positioning as well (due to other layouts that are working).
The only way I have been able to solve this is to set the width of the HR tag to 3000px with a left position of -1000px. This works, but it adds a horizontal scrollbar to the page (to display the 3000px width). Is there any way to accomplish this cleanly (without the horizontal scroll bar)? You can see my fiddle at http://jsfiddle.net/UGwst/.
Here's the HTML:
<div id="layout-wrapper">
<p>Above Content</p>
<div id="content-wrapper">
<p>Top Content Here</p>
<hr class="rule" />
<p>Bottom Content Here</p>
</div>
</div>
Here's the CSS:
#content-wrapper {
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
background-color: #ddd;
position: relative;
}
.rule {
background-color: #dbb328;
height: 5px;
position: relative;
left: -1000px;
width: 3000px;
}
I realize that there are a couple of other questions here that are similar, but don't quite seem to fix this issue.
Use position:relative on the parent.
Use position:absolute on the HR, that way the HR is bound to the parent and will scroll with it.
To hide scroll bars use overflow:hidden on your outer wrapper, or BODY.
Try
body {overflow-x: hidden;}
to eliminate the horizontal scrollbar. According to this answer, it even works in IE6 - CSS - Only Horizontal Overflow?
I want to recreate the following header:
The problem is that the content is centered in the white section. Grey is the background of body and the header is 100% of screen.
What I have now is:
CSS
.top_left {
background:#3c4d74;
}
.top_right {
background:#2f3a5a;
}
.top_center {
background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top;
height:140px;
}
#page,
.top_center {
max-width:1000px;
margin:0 auto;
}
#page {
background:#FFF;
}
body {
background:#DEDEDE;
}
HTML
<body>
<div id="top-header">
<div class="top_left"></div>
<div class="top_center">
LOGO
</div>
<div class="top_right"></div>
</div>
<div id="page" class="hfeed">
MY content bla bla bla
</div>
</body>
Which you can see working on http://jsfiddle.net/gTnxX/ (I put max width 600px instead of 1000px so you can see it on fiddle).
How can I make the left side soft blue and right side hard blue at any resolution?
To do this you need to be very aware of how positioning works.
The #header-bg is positioned so it falls below #wrapper. It is 100% width, 140px high with 2 divs which both take up 50% of that space and they both get a different colour for left/right.
The #wrapper is relatively positioned to make z-index work, putting it above the #header-bg. Width is set at 600px, and margin: 0 auto; centers it.
The #header is a simple div which has a height set to it and the background it requires.
Content follows the #header in normal flow.
Here is a jsfiddle with the requested behaviour.
http://jsfiddle.net/sg3s/cRZxN/
This even degrades nicely and lets you scroll horizontally if the content is larger than the screen (something I noticed from the original jsfiddle).
Edit:
To make it IE7 compatible I made some changes to fix 2 bugs. I had to add left: 0; and top: 0; explicitly to #header-bg to fix a positioning bug. Made the divs inside #header-bg 49% instead of 50% or else IE7 would not resize them properly and make the right div bump down. To compensate for the small gap that created I made the right div float: right;.
http://jsfiddle.net/zEcn3/12/
I'm trying to get a div content that resizes to the number of divs that fit in a line. So the example works fine when the window is bigger than all the item divs combined so they're all in a row, but when the window is resized smaller so one of the items is reflowed to the next row, the content div's width is 100% instead of shrink wrapped.
The reason I want this is so I can have centered content with a menu bar above the content that shrinks to the size of the combined reflowed content.
HTML:
<div class="wrapper">
<div class="content">
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
</div>
</div>
CSS:
.item {
float: left;
width: 70px;
border: 1px solid black;
}
.content {
display: inline-block;
border: 1px solid black;
}
.content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
A friend figured it out for me, the answer is to use media queries.
#media (max-width: 1080px) {
#main {
max-width: 640px;
}
}
So I set at the intervals of the width of each item div, so when the viewing window is smaller than a certain number, it sets the width of the container to the next level down.
I'm not quite sure if you were trying to remove the 100% width on the container, or just have the container shrink along with the content, depending on the size of the screen.
The problem, as I see it, is that when I shrink the screen, the last "Hello" on the right side gets pushed down to the next row.
So what I did is set 100% width to the wrapper. I then just removed the fixed width from the items and changed it to % widths. In this case I took the number of boxes and divided them into 100%, which was 20% each (but with 1px border I reduced to 19% each). Also, I added display:block; margin-left:auto; margin-right:auto; to the id="content".
Here's the link to JS Fiddle: http://jsfiddle.net/rm2773/Lq7H7/
I found the answer here:
http://haslayout.net/css-tuts/CSS-Shrink-Wrap
It basically amounts to using display: inline-block; on the block element you want to shrink to fit its contents.
Try to use margin:auto to the container <div> and set a fixed position.