I have a div whose width and height are some fixed percentages of the browser-window, say 70% and 80%, with certain min-width and min-height. I want this div to be displayed both vertically as well as horizontally centered in the browser window. As the browser window is resized, I want the div to automatically resize and also keep itself in the center.
Firstly, it is not a div of fixed width or height, so I cannot use absolute positioning with negative margins. I have used the usual position: static and set left and right margins to auto for the horizontal centering. This ensures automatic resizing and centering with browser window resize only in the horizontal direction. This kind of thing doesn't work for vertical centering. And I can't use negative margins for that as the position is not absolute (I need it to be static for the horizontal).
I saw here and here on StackOverflow that there could be a solution for variable-size divs by using display:table-cell. Is there preferably any other solution, maybe slightly simpler, using only some setting of position, margin etc.?
Here's the demo site where I want to apply this layout.
Thanks a lot in advance!
You could also try something really simple like:
<head>
<style type="text/css">
body, html {
height:100%;
margin:0;
}
#div1 {
height:10%;
}
#div2 {
background:#F00;
height:80%;
margin:0px auto;
width:80%;
}
#div3 {
height:10%;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>
Of course this technique needs to extra divs, which makes it not-so-very-sexy - but i'm quite sure it's pretty cross-browser safe...
Related
Look at this example
The html does not respect min-width as long as we have float:right in the CSS rules
.right {
float:right;
background:blue;
min-width:400px;
}
If removing the float:right or changing it to float:left, then the html element will not be narrower than the min-width.
How we can use min-width for an element floated right?
Screenshot: As commented by some fellas, this is what I see on the latest version of Chromium on Debian.
As you can see the left side of the div including its content is invisible (in other words, outside the visible part).
The right-floated div is doing just what it is told to in the original example: it is remaining at least 400px wide. If the viewport is reduced to less than 400px, part of the div is obscured, because it's not allowed to get any narrower than 400px. So the question is, what behavior do you really want here? Perhaps what you really want here is a non-floated wrapper element that has a min-width of 400px?
EDIT: Here's an example of how a non-floated wrapper will make it work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
body {
background:red;
margin: 0;
padding: 0;
}
.wrap {
background:#e7e7e7;
min-height: 600px;
min-width: 400px;
}
.right {
float:right;
background:blue;
min-width:400px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="right">
TEST
</div>
</div>
</body>
</html>
The wrapper could of course be colored red. I just made it gray so it was easy to see.
div is a block level element, by default it will take up 100% space..
Alternatively if you want to see only 400px element instead of 100% width you can use display: inline-block, or specify a fixed width to it.
Demo
Note: If you don't want to use display: inline-block; you can just keep it the way it is, if you minimize the window, you'll see a horizontal scroll bar so if you think that using min-width will only show element with a width of 400 px than you are wrong, it is min and not max
I found that if I put an overflow-auto div that contains other divs the width of those sub-divs is just the width of the visible part of the parent and not the width of the scrollable area.
You can see an example at http://jsfiddle.net/UdgCE/
Is there a way to specify as width the full width of the scrollable area instead?
I am not sure if this is ideal and it probably doesn't quite answer or match what you are intending to do.
However it appears as though the containers inside of the scrollable container exhibit similar behavior comparable to how a container would stretch a window. For example if you had a div with height:100%; and width:100%; it would stretch the view port and nothing more.
With that in mind, after messing around for a while, the only pure CSS solution I have found is to set specific "matching" pixel values to your inner / outer containers.
An example here ... http://jsfiddle.net/krishollenbeck/UdgCE/27/
HTML
<html>
<body>
<div style="overflow:auto" id="container">
<div id="inner-wrap">
<div style="white-space:pre" id="content">
This is a the text of the first div and it's veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long
</div>
</div>
<div style="background-color:#FFFF00" id="yellow">
</div>
</div>
</body>
</html>
CSS
#yellow {
width:2000px;
}
#container {
border:1px solid red;
width:400px;
}
#content {
width:2000px;
border:1px solid #333;
}
#inner-wrap {
width:2000px;
}
This hardly seems ideal but it seems to work. I am guessing you will most likely have to use javaScript to measure the width of the scrollable container and then match the inner divs to that dimension.
Adding a "clearfix" to the wrapper div fixed it for me.
This makes the wrapping div expand to the width of the text. Not just overflowing.
http://jsfiddle.net/7a67j/
Here's an Illustration of what I need.
On the left a fixed div and on the right a horizontally scrolling div that is something like 12000px. I need the right div to center vertically in the window when it is re-sized. I can't get the usual tags I use (position:relative and margin:auto) to work on this. I assume it's because the div overflows on the sides of the screen?
This interface should accomplish what your mockup shows. Thanks.
http://jsfiddle.net/9tV4y/2/
I'm not at all good at laying out pages, but this CSS is what you want for the left, horizontally scrolled, div,
.horizontal_scroll{
float:left;
overflow:auto;
white-space: nowrap;
width : 500px;
height : 500px;
}
and applied to the div,
<div class="horizontal_scroll"> ... </div>
Both the width and height are percentage-based (although you can change either to any other type of length that you would like). If you change the width of the left column, be sure to change the left of the right column to be the same. The vertical positioning is done with the top:0;bottom:0;margin:auto 0;height:70%;. Positioning, top/bottom margin, and height must all be set in order for it to work.
Here's the jsFiddle Demo.
HTML
<div id="lc"></div>
<div id="rc">Here's some text that does not wrap. This would be replaced with images, of course.</div>
CSS
<style>
html, body {height:100%;}
#lc {position:fixed; top:0px; left:0px; width:20%; height:100%; background:lime;}
#rc {background:red; height:75%; position:fixed; left:20%;right:0;top:0; bottom:0;margin:auto 0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;}
</style>
Note: Be sure to set the height of all elements from html to #lc/#rc's parent nodes to 100%.
I have never thought that writing a simple two column layout is so complicated using css....haha
What I want to do is the following:
When the height of the content div exceed the height of screen size, scroll bar exist only in the content div. The users can only scroll the content div but the sidebar keeps static
The two columns should have the same height
My layout is:
<---------------container------------------->
<-------------------header------------------>
<-----sidebar-------><---------content--->
<------------------footer------------------->
<---End of container------------------------->
Here is my css file:
http://137.189.145.40/c2dm/css/main.css
#WorldContainer
{
width: 1000px;
margin: auto;
overflow: hidden;
}
.ContentColumn
{
float: left;
width: 500px;
overflow: auto;
}
<div id="WorldContainer">
<div class="ContentColumn">
Content goes here!
</div>
<div class="ContentColumn">
Content goes here!
</div>
</div>
That will give you a page where the main div cannot scroll but the two div columns can. They will be side by side. You question wasn't exactly clear so hopefully this is what you were after.
EDIT: In response to you showing the example site.
Your problem is really simple.
All of your divs have a height rule of height: 100%;
When you use percentage height, you are making it a percent of the container it is within, i.e Its parent container. It is NOT a percentage height of the entire window.
Every container is specifying a percentage height so the result is a height of 0.
Give your outermost div a fixed height and the problem will be resolved.
Additional Edit:
If you are concerned with making sure the outermost div always stretches to the bottom of the window then this is a css solution using absolute positioning:
#OutermostDiv
{
position: absolute;
top: 0;
bottom: 0;
}
Using this approach still causes a calculated height even though the outer div doesn't have a hard coded height. This will allow you to use percentage heights on your inner divs and maintain a outer div that stretches from top to the bottom of the visible window.
You'd have to set your container element to overflow:hidden;, and your content div to overflow:scroll; (and possibly do overflow-x:hidden; to hide the horizontal scrollbar). The problem with this is that if your sidebar & content are going to be the same height, then you would have to have TWO scrollbars - one for content, and one for sidebar.
You could probably solve this by using another container element around just sidebar & content, and setting the overflow: scrollbar; overflox-x:hidden; on it instead of sidebar/content.
You can also use display:table and display:table-cell to create columns if you're facing difficulties with float. Here's the CSS:
#container
{
width:960px;
margin:0;
padding:0;
display:table;
}
#sidebar
{
width:300px;
display:table-cell;
}
#content
{
width:660px;
display:table-cell;
}
and the HTML is:
<div id="container">
<div id="sidebar">
<!-- Sidebar Content Here -->
</div>
<div id="content">
<!-- Content Here -->
</div>
</div>
Hope this solves your problem. But display:table doesn't work in some old browsers.
I can't seem to float DIV's correctly. What i am trying to achieve is being able to position 4 DIV's next to each other. Each aligned to the top at 0px, and spaced apart by 30 or so pixels, but i cannot use absolute positioning. The size of the DIV's are adjusted according to screen size. So, i need to position the DIV's relatively. When i try to float the DIV's they just sit atop each other.
Here is what i have thus far.
<head>
<style type="text/css">
.b1{
position:relative;
margin-left:50px;
float:left;
width:1000px;
height:200px;
background-color:#000;
}
.b4{
position:relative;
top:0px;
left:30px;
float:right;
width:1000px;
height:200px;
background-color:#000;
}
</style>
</head>
<body>
<div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"></div>
</body>
The problem is your viewport. When you float a series of elements, they will wrap to the next line if the viewport is not wide enough to display them on one line. To see what I mean, decrease the width of .b1 to 100.
You can add a container div if you really want this that can scroll horizontally.
<div class="container">
<div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"></div>
</div>
With the parent container style of:
overflow: scroll;
Floated the elements will stack when their container isn't wide enough to align them horizontally. Put the four divs inside a container that's wide enough for all of them to fit (presumably 4000px + whatever margin and padding you want on each). In your question, you mention 30px, but your example uses a 50px left margin. Here's an example with a 50px left margin. http://jsfiddle.net/brianflanagan/9ZUw5/
Add a wrapper and make the wrapper large enough to fit your DIVs:
<div class="wrapper">
<div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"</div>
</div>
.wrapper {
width:3500px;
}