I have such structure (divs):
#content-wrapper->
#left
#center
#right
#footer
#footer
{
position: relative;
}
#content-wrapper
{
position: relative;
clear: both;
overflow: hidden;
width: 100%;
height: 100%;
min-height: 300px;
}
But when text in #center div is bigger, than min-height, it becomes over the #footer. What's wrong?
UPD:
Example address: link
Thanks for providing the content. It looks like this problem is happening because #content-center has a fixed height of 200px. Get rid of this (and the fixed height for #content-left and #content-right unless you have a really good reason to keep it), or change it to min-height instead, and the footer should show up below the content as expected.
You'll still run into some problems if #content-left or #content-right is the longest column. To deal with that, you could remove the footer from the #content-wrapper div -- set your structure up like this:
<div id="content-wrapper">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-center"></div>
</div>
<div id="footer"></div>
Let me know if that doesn't work for you.
you need a new item. a clearer wich clears the floating inside the main div
you dont need any of position:relative
you dont need any of the clear:both
but you need a new item inside the content-wrapper
this.
thats all.
floated divs like a points. they not affect the size of a div or the width
another nice solution to use the table stuff:
CSS 100% width in floated div
this is not really the answer, but i prefer you to use table displayed divs, and they can be resized, placed better than only floated divs.
Related
The following layout 2 column layout will get screwed up by adding the <p>Hello</p>... Can anyone give me a clue?
<div style="width:1280px; font-size:0;">
<div style="width:640px; height:200px; background:blue; display:inline-block;">
<p>Hello</p>
</div>
<div style="width:640px; height:200px; background:yellow; display:inline-block"></div>
</div>
I could see if the height of the "p" was actually larger than 200px, but it isn't. So why doesn't it just go inside of its parent and stop messing with my layout?
To fix this, I ended up making the layout column divs relative, and using the absolute position on a child div that would be the container of the "p", but it seems like there is something obvious I am missing to make this situation simpler...
Inline-block does leave some whitespace that is undesired most of the time do to spaces in your code. The best solution I think is to float it and use 50% for the width.
div {
float: right;
width: 50%;
height: 200px;
background:blue;
}
the p tag will go in nicely.
example here on jsfiddle
other solutions and information here http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Inline block items are vertically aligned as baseline by default. Add vertical-align:top
Jsfiddle Demo
div {
font-size:0; /* remove whitespace */
}
div div {
font-size:1rem; /* reset font-size*/
vertical-align: top;
}
I have up to 4 divs on the page that will have to 'sit next to' each other horizontally. Each div will have 100% width.
All, but the first one, will therefore appear off the page until I style it otherwise (ultimately using jQuery).
How can I style the divs in order to achieve this?
Markup:
<div class="wrapper">
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
</div>
What I've Tried
I've tried floating all of the divs left and setting the overflow of 'wrapper' to hidden. I've tried setting the display to inline-block of all the divs. I've tried position absolute on all the divs. I'm trying a combination of different things just hoping it'll work but there has to be a proper approach to this.
Tell me if some like this is what you want i use display:inline-block
http://jsfiddle.net/fdXLb/
Then i can do a better explanation.
if one div has a width of 100% there will be no space for another div to align next to this one.
so I would say to align them use only 20% width.
25% works also for 4 divs but then you can not use any borders, margin or padding.
also you can set a min-width in px.
have a look at this example: http://jsfiddle.net/3CpL8/
may it helps
.wrapper > div {
width:20%;
background-color:orange;
height:60px;
float:left;
min-width:100px;
margin:5px;
}
A nice trick is to use white-space: nowrap; to prevent divs moving to the next line. This is what your css would look like:
.wrapper {
white-space: nowrap;
overflow-x: hidden;
}
.wrapper > div {
width:100%;
background-color:red;
height:60px;
display: inline-block;
min-width:100px;
margin:5px;
}
Check out this Fiddle and use your browser's inspector it to see that the divs are still there, but off screen at the width you want. I assumed you'd want to continue using overflow-x: hidden; on the parent div so there wouldn't be an ugly scrollbar when doing the javascript side :)
This is my relevant page markup:
<div id="header">
<div id="logo">
Home
</div>
<div id="user_box">
test
</div>
</div>
And my relevant CSS:
#header {
width: 960px;
height: 110px;
}
#logo {
background: url('/assets/img/logo.png') no-repeat center;
width: 300px;
height: 110px;
float: left;
}
#user_box {
width: 300px;
height: 60px;
float: right;
vertical-align: middle;
}
Now, I want to position the user_box div in the vertical middle of the header div. After a lot of Google'ing and experimenting, I have learned that this isn't easy. Apparently, I can't vertical align a block element such as a div. So I'm looking for a different way to do this.
I saw the hacky display: table; method and tried using it, but it didn't change a thing. Also tried changing the element to an inline element like a span, but that didn't work either. I even tried using margin: auto 0; for some god awful reason, and that also didn't work at all.
So I'm asking for help. How do I vertically align this div inside my header div?
Thanks!
Set the line-height of user_box equal to the height of header
Working demo: http://jsfiddle.net/AlienWebguy/pyppD/
vertical align doesn't work with divs its for aligning elements in tables. In your case you could just use this
#user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/
So I fiddled around with your code a little bit, and here's what I got: http://jsfiddle.net/3k8XE/
As you can see I'm using a table as the header, and applying the same id to each element, except the two inner divs have changed to td's. I've added an inner td to compensate the space between the two divs since they were originally set to float:left/right.
(Of course the borders are just to show what's actually going on here.)
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.
For part of a layout I want to make, I want to use three divs, all floating next to each other. The Left and Right have a max-width set, which works fine, but I want the middle div to expand its width to fill the remaining space. To clarify, the left and right divs may have a width of anywhere from 0px to the max-width, depending on what is in each, and I want the middle div to expand its width so that it takes up the rest of the space not used by the divs on either side.
The problem it's having now is that if there is a lot of content in the middle div, it's expanding and pushing the right div off to the next line instead of keeping it up with the other two.
Here's the css I have so far:
#left-column {
width: auto;
max-width: 200px;
height: auto;
float: left;
}
#middle-column {
float: left;
width: auto;
}
#right-column {
width: auto;
max-width: 200px;
height: auto;
float: right;
}
...and the HTML:
<div id="left-column">...</div>
<div id="middle-column">...</div>
<div id="right-column">...</div>
I think that this can be accomplished using a three-column, single-row table, but I absolutely do NOT want to use tables - I want to accomplish as much as possible by using pure css.
Thanks!
Classic Floats
If you order it:
<div id="left-column"></div>
<div id="right-column"></div>
<div id="middle-column"></div>
and you float the left column left, and the right column right, the middle column should fill in the remaining space. You will have some issues with margins, borders and paddings though.
Flexbox
If you don't need to support older browsers, you can use flexbox. With flexbox, this sort of structure becomes much simpler, and the markup doesn't need to change.
You will need to be able to select the parent element, so for the purposes of this demo, the code will be wrapped by <div class="wrapper">.
.wrapper {
display: flex;
flex-direction: row;
height: 200px;
}
.left {
background-color: red;
width: 100px;
}
.middle {
background-color: green;
flex: 1;
}
.right {
background-color: blue;
width: 100px;
}
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
The height and widths are added explicitly so that the <div>s are visible. With actual content, the columns would automatically adjust.
I don't want to dredge up an old thread here but I was looking for a solution to my own problem and came across this and I thought I'd better share with Francisco...
Tables are a terrible idea for positioning layout, the main problem is that before a table will show/render in the browser it has to render it's </table> tag.
Could you imagine if Facebook's column content used a table for it's layout, it would take ages for it to render anything to the screen when checking your timeline for instance!
Another issue is that tables behave extremely differently in each browser.
Basically: <table> for layout = NO!, <table> for listing out rows of data or information = YES!