I have a fixed width 960px container and I am adjusting my design to fit various screen resolutions. Within the container, I have a few floating DIVs using width % and min-width like:
width:80%;
min-width:200px;
The issue here is that the DIVs do not line up horizontally; they end up underneath each other. Previously, I had my DIVs on a set width (which I changed to min-width now).
An example of how I have formed DIVs currently:
Container:
width: 830px;
float: left;
1st-colum:
width:100%;
min-width: 200px;
float: left;
2nd-colum:
width:100%;
min-width: 200px;
float: left;
3rd-colum:
width:100%;
min-width: 200px;
float: left;
etc.
In this example, the 1st-colum DIV covers the entire width of the container and pushes the other DIVs down.
Example of HTML below:
<div id="container">
<div id="1stcolum">Hello world</div>
<div id="2ndcolum">Hello world</div>
<div id="3rdcolum">Hello world</div>
</div>
As you can see, nothing fancy in the HTML either.
Based on your posted CSS and HTML..
You can't have 3, left floating, divs all taking up the same 100% width unless they stack. This is why the divs stack. Column one takes up 100% of the width, there's no room for column two to also take up 100% of the width unless column two falls below column one.
If you want the columns to actually be columns, you need them to have a width of 33.3%. (one-third of 100%)
And, if you want the columns to be a minimum of 200 pixels wide you don't need a min-width for each column, you simply need a min-width of 600px for the container div.
DEMO
Related
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 bet this question is asked several times before, but I can't find an answer. Not here or google. I guess that says alot of my front end- (and searching?-) skills.
So apologies for an expected already answered post.
My problem is how ever that I have a div on 980 pixels that I want to fill with other smaller divs. Lets say that the smaller divs are 180 pixels wide, and that i have 7 of them. Then it should be 2 rows of small divs with 20 pixels beween them and it should be 5 on the first row and 2 on the next row.
One way is to set them to float: left and have a margin-left: 20px. This would how ever end up in a total row with of 1000px (20 to wide) wich will result in 4 divs on the first row and 3 on the second.
One try was to set a margin-right:-20px on the container, but it did (not that unexpected) not work.
Any help or links to answers will be welcome!
EDIT:
I realized i was not really clear in my question. The container will also be rezisable, so the smaller divs should just fill the space in the container with the first on the row 0px from left and the last on the row will be 0px from right. The divs in between should just autofit. I have only found stuff like this for one row problems. I would then also prefer if it broke the row 'til next line if the margins between the smaller divs are < 1 pixel.
EDIT 2:
I made a jsfiddle to my problem. The green boxes should autofill the gray area (horizontally, the vertical margin can be a given value, like 15/20 px).
http://jsfiddle.net/yfnpv/
It's difficult to tell exactly want you want.
If I understand you right, it's this.
demo
I have added some helper elements :
....
<div class="obj">7</div>
<div class="obj push"></div>
<div class="obj push"></div>
<div class="pushend"></div>
</div>
and the CSS is :
#container {
max-width: 980px;
background-color: gray;
display: inline-block;
text-align: justify;
}
.obj {
width: 180px;
height: 180px;
background-color: green;
display: inline-block;
}
.obj.push {
height: 0px
}
.pushend {
width: 100%;
height: 0px;
display: inline-block;
}
The idea is not mine, but I can't just find the place where i saw it.
I believe that the original author also used some clever trick with pseudo-elements, just to not change the HTML, but I can't exactly remember.
<div id="container">
<div class="1column first">one column</div>
<div class="1column">one column</div>
<div class="1column">one column</div>
<div class="1column last">one column</div>
<div class="clear"></div>
<div class="1column first">one column</div>
<div class="1column">one column</div>
<div class="1column">one column</div>
<div class="1column last">one column</div>
</div> <!-- container -->
The CSS
#container {width: 630px;}
.1column {width: 150px; float: left; margin-left: 5px; margin-right: 5px;}
.first {margin-left: 0px;}
.last {margin-right: 0px;}
.clear {clear:both;}
In order to make sure everything fits properly, you have to add the width of the smaller div + its margin values to get a total div value and then add that to the others.
So for the first div, its total width should be 155px (150px + 5px), the next should be 160px (150px + 5px + 5px). So if you have the first and last div's 155px and two other divs 160px, your total width should now be 630px.
To make a break to form another row, you would add a clear:both div in between. This clears all floats, left or right, and moves to the next line. Then you can repeat.
The 5px margins would make a 10px margin between each smaller div (5px + 5px).
This is just a broad example. You can have different size divs (you should Google css grid frameworks), you will learn a lot about how these systems are set up. They're essentially the same as what I did but go further than this.
What ever you do, just make sure that the inner divs don't go beyond the "container" divs width or you will run into problems. Remember, padding + margin + width + borders = total width. So even adding a simple 1px border to any div will automatically increase it by 2px (1px on left 1 px on the right).
Edit: then if you wanted to center align the whole thing, you would add to the container div in the CSS
#container {width: 630px; margin-left: auto; margin-right: auto;}
I hope this helps.
I have 2 columns of divs (left and right) contained in the parent div. I want the parent div height automatically adjusts when either left or right div height expand. The problem I have now is that the height of parent div just expands when the left expand, it does not work for the right. I have height:auto for all divs.
Are there anyone have solution?
you can do this by float for example
<div class="parent" style="float:left">
<div class="child" style="float:left"></div>
<div class="child" style="float:left"></div>
</div>
You are probably using float to move the right div to the right side. Floats do not automatically adjust the parents height, you must add the following code right before the end of the parent div.
<br style="clear:both;" />
This will mark the end of all floats on the same level.
You are probably floating your divs to keep them next to each other. By doing so, you 'remove these divs from the flow', i.e. the parent does not take them as content anymore.
You can 'by-pass' this effect by giving overflow: hidden to the parent or by adding a clear div.
Example w/ overflow: http://jsfiddle.net/BramVanroy/LJTGh/
Important CSS:
#wrapper {
height: auto;
width: 77%;
margin: 20px auto;
overflow: hidden; /*THIS IS IMPORTANT */
border: 1px solid;
}
OR
Example w/ clear: http://jsfiddle.net/BramVanroy/LJTGh/1/
Important CSS:
.clear {clear: both;}
The first option needs a line more of CSS, the second one a line more of HTML and a line more of CSS.
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.
I have code like this
<div class="container">
<div class="section">
<div class="left">
a profile pic and some text
</div>
<div class="right">
a wider div with much more text and some bio info
</div>
</div>
i would like a dotted border in between the two divs to separate the left column from the right. my problem is that no matter if i put the border on the left column or the right column it doesn't stretch to the bottom. if either column is shorter/longer than the other the border always stops before reaching the bottom looking cut off.
Try this:
html,body,.container, .section, .left, .right{height:100%}
.left, .right {border:1px dotted black;float:left;}
example: http://jsbin.com/agaza5
Make both your left and right divs stretch the full height of the container (section).
.left{ height:100%; }
.right{ height: 100%; }
I would set the height of your section div and then just set the children heights to 100%.
Check it out
Set the height property equally for both divs columns using CSS:
.left {
border:1px solid #ccc;
height:100px; /* you can use "100%" too, if you want */
}
.right {
height:100px; /* you can use "100%" too, if you want */
}
You can also use the min-height attribute if you want to create the same minimum height for both divs, but let only one div stretch further if its content grows.
I would also add that you should use more semantic names for your divs. What if one day you decided to move your left column and it was no longer on the left? You would have to rename everything!