I am having an issue with my divs moving when the page is resized. If you look at the plunker you will see a Header with boxes below. If you resize the workspace by dragging the scroll bar to the left you will see how the page should be. I tried wrapping all items in 1 div named wrapper and tried both relative and absolute positioning with a min-width. I also did the same for body. After inspecting the page with firebug looks like the html tag should have sizing or positioning. That didn't work either (see below). I would like to be able to minimize my screen to 50% and maximize to 250% and keep the same initial layout as if my screen is at 95% based on the wrapper. Any ideas?
Here's plnkr
<html>
body, html{margin:0px; padding:0px; width:100%; min-width: 900px; position:relative}
div.wrapper{ width:95%; min-width: 900px; padding-left: 6px; padding-top:5px; position: relative; }
<body>
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left"></div>
<div class="right"></div>
</div> <!--end wrapper -->
</body>
</html>
you could use percentage and fix min-wheight + set overflow to auto (looks like frameset .. not so nice actually)
Or you could try to relay on box-sizing and use vertical padding on percentage value(it will use parent's width as reference).
floatting pseudo can then, be used and will allow divs to grow taller instead showing a scrollbar.
. {
box-sizing:border-box;
}
.wrapper {
max-width:1300px;
margin:auto; /* ?*/
}
.wrapper #header ~ div {
border:double;
margin:0.4% 0.2%;
padding:5px;
}
#header, .right, .rightbottom {
overflow:hidden;
}
.left {
float:left;
width:30%;
}
.left:before {
content:'';
float:left;
padding-top:204.5%;
}
.right:before, .rightbottom:before {
content:'';
padding-top:30%;
float:left;
}
.wrapper #header ~ div.rightbottom {
border:solid 1px;
}
.rightbottom:before {
padding-top:60%;
}
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left">
</div>
<div class="right" >
<div class="gridStyle" data-ng-grid="gridOptions1">grid</div>
</div>
<div class="rightbottom">right bottom</div>
</div>
http://plnkr.co/edit/K1yOpBOfX3ukqHX7f2oa?p=preview
I'm not too sure of what kind of behavior you look for once there is real stuff in your pages.
If you want the header and the two divs to always have their own row, perhaps you could contain them each in divs that are set to width: 100%?
Related
I have two divs inside their parent div:
<div>
<div class="col-1"></div>
<div class="col-2"></div>
</div>
.col-1, .col-2 {
width: 50%;
}
They both have width of 50%. Yet they continue to occupy 100% of their parent even though their background is indeed 50% of the parent. Why so?
A div needs to be thought of as a division which, unless you tell it to float, will take all the width of a line, even though it may not fill it, this is because of the inherent css property display:block that's applied to a div. If you tell both divs to float by adding float:left; or float:right; to their css, they will allow other elements to share the width of their parent. Here's a snippet (you can see the result by clicking on the run button) of what it will look like
#container .child{
width:50%;
float:left;
}
.red{background:red;}
.blue{background:blue}
<div id='container'>
<div class='child red'>a</div>
<div class='child blue'>b</div>
</div>
Try this:
.col-1{
float:left;
}
.col-2{
float:right;
}
you can also experiment with the display property, for example display:inline-block could help you
Here is the Example program... You can use "float"
<div id="container" style="width:100%">
<div id="menu" style="background-color:blue; height:200px; width:50%; float:left; color:white;">
Div1</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:50%;float:left;">
Div2</div>
</div>
</body>
</html>
If you want to precisely control the position of a <div>, you should use position: absolute
<style>
.container {
position: relative;
}
.col-1, .col-2 {
position: absolute;
width: 50%;
top: 0;
}
.col-1 { left: 0; }
.col-2 { left: 50%; }
</style>
[...]
<div class="container">
<div class="col-1">[...]</div>
<div class="col-2">[...]</div>
</div>
I saw there are many similar questions, but I can't find one solution working for me.
My page has this structure:
<body>
<div id="whole_page">
<div id="header"></div>
<div id="main">
<div id="img_container"></div>
<div id="img_container"></div>
<div id="img_container"></div>
</div>
</div>
</body>
My css is:
html,body{
height:100%; width:100%;
padding-top:50px;
}
#whole_page{
height:calc(100%-50px); width:100%;
}
#header{
position:fixed;
height:50px; // header
}
#image_container{
width:100%;
height:30%;
}
I want to set "main" 's height to 100% (window height) minus header height (50px).
Further, I want each div with id "image_container" to be 30% of the "main" div and large 100% of widonws width. So that I have approximately 3 of those div in the page, before needing to scroll.
The problem is that % seem to not work at all. As I didn't write them (tried with Chrome's dev tools).
Actually I am using bootstrap to fill content of header/main but as far as I know this shouldn't give problems with height.
Any clue?
Thanks in advance
Your key problem is that you did not change the height of #main. You also had a miss type between your CSS and HTML, in your CSS you referred to #image_container while in your HTML you used 'id="img_container"'. I change both CSS and HTML to '.img_container' and 'class="img_container"' respectively. I also noticed that you had twice the amount of space at the top than the size needed for your #header since 'padding-top: 50px;' was applied to html and body.
Here is the code:
<div id="whole_page">
<div id="header" style="background-color: yellow;"></div>
<div id="main">
<div class="img_container" style="background-color: red;"></div>
<div class="img_container" style="background-color: blue;"></div>
<div class="img_container" style="background-color: green;"></div>
</div>
</div>
and
html, body {
height:100%;
width:100%;
}
body {
margin: 0;
padding-top:50px;
}
#whole_page {
height: calc(100% - 50px);
width: 100%;
}
#header {
position: fixed;
height: 50px;
width: 100%;
top: 0;
}
#main {
height: 100%;
}
.img_container {
width: 100%;
height: 30%;
}
PS - add color to some of the tags so I could see them. You can just delete the style attribute from the '#header' and '.img_container' tags.
EDIT - Here is a jsfiddle: http://jsfiddle.net/xiondark2008/DJJ2d/
EDIT2 - Just side thought, 'height: calc(100%-50px);' is an invalid property, at least in chrome, however 'height: calc(100% - 50px);' is a valid property, again, at least in chrome.
You can use box-sizing: border-box and padding..
http://jsfiddle.net/jVkL6/
I'm currently working on a website, but it's important that it must fit on every page. I have 5 divs horizontal. The 3 divs in the middle are fixed sizes, 200 px, 400 px and again 200px. Now I have one on the far left and one of the far right, that should be equally big and fill out the screen no matter what resolution you're viewing the website in. So the middle part should be in the middle, and the 2 divs on the left and right of the middle part should fill out the screen. I have tried several techniques explained in other threads, but most are only for the left, or only for the right part and not working for both left and right. Maybe someone has a solution?
My HTML
<div id="left">
test
</div>
<div id="buttonsleft">
test
</div>
<div id="middle">
test
</div>
<div id="buttonsright">
test
</div>
<div id="right">
test
</div>
My CSS
#left{
float:left;
background-color:#C00;
width:15%;
height:100%;
}
#buttonsleft{
float:left;
background-color:#3F0;
width:200px;
height:100%;
}
#middle{
float:left;
background-color:#30F;
width:400px;
margin:auto;
}
#buttonsright{
float:left;
background-color:#3FF;
width:200px;
height:100%;
}
#right{
float:left;
background-color:#300;
width:15%;
height:100%;
}
Can be easily done using the CSS table layout.
See that Working Fidde
If the view port is smaller then 1000px wide, then the divs will shrink.
[you didn't specify what should happend if the view port is less then 1000px]
HTML:
<div class="Container">
<div id="left">left</div>
<div id="buttonsleft">buttonsleft</div>
<div id="middle">middle</div>
<div id="buttonsright">buttonsright</div>
<div id="right">right</div>
</div>
CSS:
* {
font-size: 25px;
color: white;
}
.Container
{
display: table;
width: 100%;
}
.Container > div
{
display: table-cell;
}
#left {
background-color:#C00;
}
#buttonsleft {
background-color:#3F0;
width:200px;
}
#middle {
background-color:#30F;
width:400px;
}
#buttonsright {
background-color:#3FF;
width:200px;
}
#right {
background-color:#300;
}
How would i make my middle div take the remaining space left in width, but still staying in its place beside the 2 other divs?
Also if i remove either of the 2 divs on the sides, the main div should just take what space there is left?
Code:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
http://jsfiddle.net/U3Hr5/2/
My suggestion is using a table since you want all of them to be on the same row but with their own heights.
Html:
<div class="row-fluid">
<table style="width: 100%">
<tr>
<td class="sidebar">1</td>
<td class="content-box">2</td>
<td class="sidebar">3</td>
</tr>
</table>
Css:
.sidebar {
width:225px;
background-color:blue;
}
.content-box {
background-color:red;
}
Here is the fiddle edit:
http://jsfiddle.net/mDpEX/
//Flipbed
If you don't want to use table for layout, you can make use of css3 display table, table-cell properties,
#container {
display: table;
width: 100%;
}
#left, #middle, #right {
display: table-cell;
height: 100px;
}
#left, #right {
width: 150px;
background: green;
}
#middle {
background: gray;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
jsfiddle
More on css display properties
I assume you want something like this.
The HTML:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
The CSS:
.sidebar {
float:left;
width:225px;
background-color:blue;
}
.content-box {
clear:left;
background-color:red;
width:225px;
}
Hope this helps.
Actually i didn't get your question correctly. If you are looking to align your div on to the remaining space after your first div ie after sidebar div simply put width of content-box as 50%(or the size you want).
It depends upon how much you want the layout to respond to resizing without using JavaScript and what browsers you're trying to cater for. If your layout is essentially static and you just want to respond to width changes then you can use something like this.
http://jsfiddle.net/U3Hr5/4/
HTML
<div class="row-fluid">
<div class="span12">
<div class="left sidebar">1</div>
<div class="content-box">2</div>
<div class="right sidebar">3</div>
</div>
</div>
CSS
.span12 {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
width: 225px;
background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
margin-left: 225px;
margin-right: 225px;
background-color:red;
}
You can try something like this http://jsfiddle.net/kKGVr/
Basically, if you don't wrap the content in a containing div it will expand to fill the available space - you can test this by removing the divs called #left or #right. This will also allow you to add a footer because no absolute positioning is used.
It will fall down, however, if the central column becomes longer than the side columns... solution? Not sure, perhaps use javascript to adjust the height of the side columns so they are always at least as long as the central column.
HTML:
<div id="wrapper">
<div id="right">...</div>
<div id="left">...</div>
content here
</div>
and CSS:
#left{width: 200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}
How can i set the width of the first 2 divs to be dynamic (fit the contents width), while the 3rd div should use remaining horizontal space and be horizontally scrollable.
The result i need is that all 3 divs sit side by side and the 3rd div is hoziontally scrollable.
Script i have is as follows
HTML
<div id="a">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="b">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="c">
<table>
<tr><td>text</td></tr>
</table>
</div>
CSS
div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
width: 100%;
overflow-x: scroll;
}
The above script pushes div3 to the next line, which i dont want.
If you float #a and #b to the left, #c will fill the rest of the parent's width.
To get #c horizontally scrollable, you style its content container as:
#c .scroll-content {
/* You shouldn't do this on a table, but rather on a wrapping container. */
display: inline-block;
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
I made an example at JSFiddle.
You should set a parent div to hold them all together in the same row. Something like this instead should work.
<div id="parent">
<div id="a">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="b">
<table>
<tr><td>text</td></tr>
</table>
</div>
<div id="c">
<table>
<tr><td>text</td></tr>
</table>
</div>
</div>
div#a
{
float: left;
}
div#b
{
float: left;
}
div#c
{
float: left;
}
#parent{
width: 100%;
overflow-x: scroll;
}
Also you might want to refactor your code. Since all of the divs are floating left, you might want to use just one class that floats to the left. I hope this helps.
The CSS...
#a {
float:left;
border:solid 1px #000;
width:33%;
}
#b {
float:left;
border:solid 1px #000;
width:33%;
}
#c {
float:left;
border:solid 1px #000;
width:33%;
}
.scroll{
float:left;
overflow:auto;
width:100%;
}
.content {
width:1000px;
overflow:auto;
}
And the HTML...
<div id="a">
This is text within my first content box
</div>
<div id="b">
This is text within my second content box
</div>
<div id="c">
<div class="scroll-content">
This is text within my third content box and this is horizontal and scrollable
</div>
</div>
UPDATED JSFIDDLE LINK BELOW AGAIN!!!
And a demo on jsfiddle - http://jsfiddle.net/GeLqV/1/
Mark, this will work for you now. I now see that you wanted all three divs on the same row, and the last one being able to horizontally scroll. Look at my jsfiddle demo. No matter what your screen size will be, all three div's are fluid in size and will stay together (for the most part).