I have a item (e.g. a div tag, which takes 1/3 of the screen-width and has a minimum width of 500px and a maximum width of 700px. Beside it, there is another item which takes the rest of the screen. If I just assign a width of 66% it works fine as long as the height of the other item does not take one of the max values, at which point an overflow happens or the item just lets space out.
Any ideas who this is done by html without building an overly complex javaScript script?
best Regards,
Stefan
Edit Code:
This sould provide a simple example, As long as the site is under 500px, both are 50% of the screen, but if it gets larger, the right side (marked with world) should fill out more than 50%.
<html>
<head>
<style type="text/css">
* {
border: 1px solid black;
}
html,body,.fullheight {
height: 99%;
width: 99%;
}
table {
table-layout: auto;
}
.minfield {
max-width: 250px;
border: 1px solid red;
overflow: hidden;
}
.leftfloat{
float: left;
}
.maxsize{
height: 99%;
width: 49%;
}
</style>
</head>
<body>
<div class="fullheight">
<div class="leftfloat minfield maxsize">
<p>hello</p>
</div>
<div class="leftfloat maxsize">
<p>world</p>
</div>
</div>
</body>
Demo|FullScreen
possible duplicate : Make a div fill the remaining screen space
and another:
How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)
EDIT:
Look what i did using one of the solutions i provided earlier:
<html>
<body>
<div class="fullHeight">
<div class="minField maxSize"><p>hello</p></div>
<div class="maxField maxSize"><p>World</p></div>
</div>
</body>
</html>
* {
border: 1px solid black;
}
html,body,.fullHeight {
height: 99%;
width: 99%;
}
.maxSize{
height: 99%;
}
.minField{
float:left;
width:250px; /* This is a must so you could define min/max */
max-width:250px;
width: expression(this.width > 250 ? 250: true); /* IE Hack for max-width */
background-color:#ff0000;
}
.maxField {
margin-left: 250px;
background-color:#00FF00;
}
jsFiddler Code | jsFiddler FullScreen
Related
I have a 3 column layout which I'm creating using inline-block divs. The left and right columns are fixed widths but the inner column is to hold dynamic content and should expand horizontally as required by it's content width.
That's easy enough... the tricky part is that when the browser window is smaller (horizontally) than the width of the left, right and expanded middle divs, I would like the middle div to scroll and the side columns to stay fixed. In other words, the middle div's size should shrink and grow with window resize but should not grow beyond the available space.
Simply laying out the divs looks like this
https://jsfiddle.net/xzjp5xef/1/
HTML:
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
<div id="spacer">
150px spacer
</div>
</div>
<div id="rightcol">
right
</div>
</div>
CSS:
div {
height:200px;
border-style:solid;
display: inline-block;
border-width: 1px;
vertical-align: top;
}
#container{
white-space: nowrap;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
margin: 10px;
height: 20px;
}
#rightcol {
background-color: red;
width:100px;
}
The point of the "spacer" div is to represent the dynamic content which in this case I've fixed to 150px plus padding. So in this case I want the divs to lay out the way they do in the above fiddle, but then when the window is shrunk horizontally, I want the middle div to scroll and the left and right divs to remain fully visible.
That fails because then the window gets a scroll bar but the middle panel remains the same width and the right hand div disappears into the scrolled region.
My next attempt was using absolute positioning
https://jsfiddle.net/n4zrLqh2/
I fixed the left div to the left and the right div to the right and set the middle div's right and left properties. This is a neat trick which allows the middle div to stretch and take up all available space. This works nicely but doesn't create the effect I'm after when the window is big - because I don't want the middle column to expand further than is necessary to contain its content.
In the end I've solved this with javascript but would much prefer a CSS solution.
Edit: To help others see what I'm trying to achieve, here's the complete javascript solution (which I'd prefer to achieve with pure CSS):
HTML:
<div id="lcol">left</div>
<div id="midcol">
<div id="spacer">150px spacer</div>
</div>
<div id="rightcol">right</div>
CSS:
div {
height:200px;
display: inline-block;
vertical-align: top;
margin: 0px;
float:left;
}
body {
white-space: nowrap;
margin:0px;
max-height: 200px;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
height: 20px;
background-color: gray;
margin: 5px;
}
#rightcol {
background-color: red;
width:100px;
}
JAVASCRIPT (with jquery)
function adjustSizes() {
// Sizes of middle divs are dynamic. Adjust once
// built or whenever the viewport resizes
//
var $leftDiv = $('#lcol')
var $milddleDiv = $('#midcol');
var $rightDiv = $('#rightcol');
// 1. Resize middle div to available viewport space
var maxBodyWidth = $(window).innerWidth() - ($leftDiv.outerWidth() + $rightDiv.outerWidth());
$milddleDiv.css('maxWidth', maxBodyWidth);
}
$(window).resize(function () {
adjustSizes();
});
And the fiddle: https://jsfiddle.net/bjmekkgj/2/
I think setting max-width of spacer will solve your problem in case content increases.
Set max-width to calc(100vw - 200px) if all margin and padding are 0. Otherwise adjust the value 200px taking margin, padding into account.
I have created a plunker. Please check if it solves your issue. Try checking after running plunker in spearate window
http://plnkr.co/edit/WG9v0MyiD2hiaZrOA3Yw?p=preview
For the one example you provided, since the left and right columns are positioned absolutely, you should take up the space somehow. I used padding on the middle column, then nested a "content" block inside that represents the visible part of the middle column. Then, I put overflow-x: auto; on the new content block and set a max-width on the overall container to force the new block to shrink.
(In previous edits, I was attempting to do this same thing but with floats instead of absolutely positioned divs)
* { margin: 0px; padding: 0px; }
#container {
box-sizing: border-box;
display: inline-block;
position: relative;
max-width: 100%;
border: 1px solid black;
height: 200px;
}
.column {
box-sizing: border-box;
height: 100%;
}
#left {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-right: 1px solid black;
background: blue;
}
#mid {
border: none;
padding: 0px 100px;
}
#mid > .content {
box-sizing: border-box;
background-color: yellow;
overflow-x: auto;
height: 100%;
}
#spacer {
width: 150px;
height: 20px;
}
#right {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-left: 1px solid black;
background: red;
}
<div id="container">
<div id="left" class="column">
left
</div>
<div id="mid" class="column">
<div class="content">
<div id="spacer">
150px spacer
</div>
</div>
</div>
<div id="right" class="column">
right
</div>
</div>
...and in JSFiddle form
flexbox can do that.
div {
border-style: solid;
border-width: 1px;
}
#container {
height: 200px;
display: flex;
}
#lcol {
background-color: blue;
width: 100px;
}
#midcol {
background-color: yellow;
flex: 1;
overflow-x: auto;
}
#rightcol {
background-color: red;
width: 100px;
}
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
</div>
<div id="rightcol">
right
</div>
</div>
JSfiddle Demo (showing overflow effect).
Support is IE10 and up.
Try setting the middle div to have a max width with a percentage so it will get thinner with the screen size:
.midcol {
max-width: 25%;
}
I put a value for the max-width in there for an example, but you can change the value.
I am trying to create simple web page using divs. I have read a lot of articles, but everythere width and height of divs is specified in px. Maybe I don't understand something, but maybe it is better to specify this attributes in percantage ?
I have tried, but received not what expected.
I need to get such result
Here is my html
<!DOCTYPE HTML>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="style/stylesheet.css" />
</head>
<body>
<div id="container">
<!-- HEADER -->
<div id="header">
<div id="logo">Logo</div>
<div id="top_info">Top Info</div>
<div id="navbar">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>
</div>
</div>
<div id="content_data">
<div id="banner">Banner</div>
<div id="left_col">Left column</div>
<div id="content">Contnent area</div>
<div id="right_col">Right column</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
And here is css file
#container {
width: 90%;
margin: 0 auto;
background: #fff;
}
#header {
width: 100%;
height: 60px;
border-bottom: 1px solid #c7c7c7;
background: #333;
}
#logo {
float:left;
width: 40px;
height: 40px;
margin: 10px;
background: #ccc;
}
#top_info {
float: right;
width: 100px;
height: 40px;
background: #666;
border: 1px solid #c7c7c7;
margin: 10px;
}
#navbar {
height: 20px;
clear: both;
}
#navbar ul {
margin: 0;
padding: 0;
list-style: none;
}
#navbar ul li {
clear: both;
}
#footer {
padding: 20px;
clear: both;
}
#navbar ul li a {
font-size:12px; float: left;
padding: 0 0 0 20px;
display: block;
}
#banner {
background: #666;
height: 120px;
clear: both;
}
#content {
width : 60%;
}
#left_col {
float: left;
width: 20%;
height: 200px;
border: 1px solid #333;
color: #FFF;
background: #000;
}
#right_col {
background: #000;
float: right;
width: 20%;
height: 200px;
border: 1px solid #333;
color: #FFF;
}
But get next result. If set width of container id in pixels it works great.
Please help to solve the problem if its possible.
And give some advices how to build responsible pages, maybe some articles or books.
Thx.
UPDATE
I have changed width to 50% and it works. I guess this is because of parrent div has width 90%, so 20%(left) + 20%(right) + 50% (content) = 90%. Am I right ?
The problem is that left and right columns have set border 1px. It makes their width 20% + 2 px (left and right 1px border). Also content area should be floated too.
EDIT: if you want these borders, set width of columns as follows:
width: calc(20% - 2px);
Using percentages is one way to create a responsive web page but the better way is by using Media Queries.
Take a look at CSS3 media queries.
They are exactly what you need. All you need to do is specify some maximum or minimum screen dimensions in your case for each media-query. This way, you can design how your site looks on mobile devices, tablets, computers, etc. and they need not all be the same!
Something that looks good on a big screen like that of a computer need not necessarily look good on a mobile device but using media query, you can design separate versions for both devices!
For example, you execute some CSS only for desktop computers using min-width
#media screen and (min-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of more than 800px*/
body {
background-color: lightblue;
}
}
#media screen and (max-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of less than 800px*/
body {
background-color: yellow;
}
}
This way, your webpage looks different on desktop computers and looks different on mobile devices and tablets.
Also, see this great link.
Yes, you are right.
Your percentages should add up to 100%
20%(left) + 20%(right) + 50% (content) = 90% (not 100%)
You could make the left and right percentages 25% each to get 100%. That should work fine.
The percentage is with respect to its direct parent. So it doesn't matter if parent is set to 90%. It's because of the 1px border on the side divs. which makes the divs a little bigger than 20%, going over 100% of parent.
You can solve this by make content little smaller to make space for the extra 4px due to the 1px borders on both side divs:
#content {
width : 58%;
float: left;
}
It is cleaner to float all divs left. You'll get the same result.
<html>
<head>
<style type="text/css">
.parent
{
width: auto;
height: auto;
min-width: 600px;
min-height: 600px;
border: 1px dashed #f00;
padding: 5px;
overflow: auto;
position: absolute;
}
.child
{
width : 100px;
height: 500px;
border: 1px solid #0f0;
float: left;
position: relative;
}
.second_child
{
width : 1800px;
height: 100px;
border: 1px solid black;
float: left;
position:relative;
}
</script>
</style>
</head>
<body style="overflow:auto">
<div class="parent">
<div class="child">
</div>
<div class="second_child">
</div>
</div>
</body>
</html>
I'm trying to put two box in a bigger box. I got it next to each other and it works fine now if I expand the second box width to larger then the width of the window.
Example your screen is 1024x720 the width of the second box is 1800px the second box repositions underneath the first box. I'm just curious why it does that and not put a scroll bar and keep the position of the objects.
Am I positioning it wrong, or am I thinking about this in a wrong manner. I'm almost to tempted to try this with a table as a layout but that seems so counter intuitive to me.
That's the essence of floating DOM elements. They don't force anything. If you want them to stay side by side, you need to give the container a width to support the contents (> 1904px).
I'm just curious why it does that and not put a scroll bar and keep
the position of the objects.
You can set .parent to overflow: scroll; to force this.
I have variable-width HTML layout with a fixed-width menu to the left of a content <div> of variable width (set by css max-width and min-width). For very narrow browser windows I would like the content to wrap beneath the menu, and I am currently achieving this by setting float:left on both menu and content.
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 200px; float: left; border: 1px black solid">Menu (200px wide)</div>
<div style="max-width: 800px; min-width: 300px; float:left; border: 1px black solid">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>
In this example, wrapping of the content div currently occurs as soon as the browser viewport is smaller than 1000px (menu width + content max-width). I would like to have the width of the content reduce first, and have the content wrap beneath the menu only when viewport is smaller than 500px wide (menu width + content min-width)
Is there a way to achieve this, either with my current arrangement of floated <div>s, or otherwise?
Please check if this is the behavior you want.
DEMO
JSFiddle
HTML
<html>
<head>
<title></title>
</head>
<body>
<div class="menu">Menu (200px wide)</div>
<div class="content">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>
CSS
.menu {
width: 200px;
float: left;
border: 1px black solid
}
.content {
max-width: 800px;
min-width: 300px;
margin-left: 200px;
border: 1px black solid
}
#media all and (max-width: 500px) {
.menu {
float: none;
}
.content {
margin-left: 0;
}
}
I suppose this is what you want: http://jsfiddle.net/joplomacedo/WXFQz/
The solution is a simple media query - below a screen-width of XYZpx do this. If you've never heard of it before here's an article about it http://css-tricks.com/resolution-specific-stylesheets/
For those of you who can't see the fiddle, here's the html and css :
HTML:
<div class="container"> <!-- it's possible to do it without this extra element. it's simply more intuitive this way -->
<div class="menu"></div>
<div class="content"></div>
</div>
CSS:
.container {
max-width: 1000px; /* your self defined 800px max-width for the content-div + 200px from the .menu's width */
min-width: 200px;
}
.menu,
.content {
height: 200px;
}
.menu {
float: left;
width: 200px;
}
.content {
margin-left: 200px; /* same as '.menu's width */
}
#media (max-width : 400px) {
.menu {
float: none;
width: auto;
}
.content {
margin-left: 0;
}
}
there is a demo of this from css-tricks:
http://css-tricks.com/examples/PerfectFluidWidthLayout/
I hope this is good for you.
I am having issues with the below HTML when resizing the window;
1: Right bar suddenly drops down when the width is resized too small.
2: Spacing between the content and right bar gets larger as the width gets larger.
<style type="text/css">
#content {
width: 80%;
float: left;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="content">contents</div>
<div id="rightbar">
link 1
link 2
link 3
</div>
There are two ways to get the result you want:
put the right bar before the content
in the html, remove the width from
the content and give it a right
margin instead (width of the right
bar + something extra)
position the right bar absolutely on the right, remove the width from
the content and give it a right
margin instead (see number 1.)
By the way, the problem is that you are mixing absolute and relative widths and what you see is exactly what you are supposed to see.
Edit: After re-reading your question, I think that with overflow:hidden (makes it a nice square block) on the content part, you can get it to work in combination with 1. without the margin:
<style type="text/css">
#content {
overflow: hidden;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="rightbar">
link 1
link 2
link 3
</div>
<!-- content needs to be placed after rightbar -->
<div id="content">contents</div>
Once you resize too small, the percentages width will be smaller than the text content within your element. The browser cannot concatenate words, so the element is forced to have a min-width. Try putting the elements in a wrapper with an assigned min-width.
Between these two bars you have a space of 3%. 3% of 1000px is 30px. 3% of 2000px is 60px. Therefore if you right element is floating right, it makes sense you'll see that additional space. Try floating the element left.