This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS 2 Column layout: Column height
I am trying to create 2 columns that are even in length. I got it to work to an extend, but would like to know how to limit the size of the outer div to the inside content. This way the outer div re-sizes depend on either columns required length to display all the content within.
Right now my code adds a lot of extra height.
Thanks in advance!
Here is a jsfiddle with my code:
http://jsfiddle.net/Bk77A/
I won't repeat all of you code, but basically you need a clearfix, then set the container height:auto; position:relative. Also, why do you have soooo much padding and negative margin on your main content? Get rid of it.
<div id="wrapper">
<div.... innner divisions that are floated>
</div... end of all inner divs>
<div class="clearfix></div> (clearing our floats)
</div> (closing our wrapper)
css:
#wrapper {
height:auto;
position:relative;
additional styling
}
.clearfix {
clear:both;
}
Get rid of this padding-bottom: 9999px for both your columns
Related
I'm having some trouble getting this done 'right'...
its a two parter. :)
1.) is getting the layout to look like how I need it (without resorting to tables!), but for some reason I can get the divs and nested divs to 'act right'... (surely its my error/mis-understanding)
I am trying to get a layout like so, using only DIVS and display..etc..
http://dmstudios.net/misc/layout.jpg
I have attempted it myself (so you dont think Im just looking for a handout) :)..
but some things like the vertical alignment of the custom div container isnt working..etc
Here is my JSFiddle attempt: http://jsfiddle.net/yeKxU/1/
JSFiddle Code:
<div class="container">
<div class="logo"><img src="http://academickids.com/encyclopedia/images/thumb/5/53/150px-Blue_morpho_butterfly_300x271.jpg" /></div>
<div class="custom">
<div class="president">item1</div>
<div class="mission">item2</div>
<div class="active">item3</div>
</div>
<div class="url">www.nike.com</div>
<div class="freetext">random text</div>
</div>
CSS:
* {
border: 1px dashed blue;
padding:0;
margin:0;
}
div{
display: inline-block;
border:2px solid;
border-radius:2px;
border-color:#FF0000;
}
.container{
width:450px;
padding:0;
margin:0;
}
.logo{
padding:0;
margin:0;
}
.custom{
vertical-align:top; /* doesnt work to move the 'custom div' to the top */
/* width:63%;*/ /*needs to auto stretch to fit the rest of the space after image*/
}
.custom div{
display:block;
background-color:#EEEEEE;
}
.url{
width:100%;
}
.freetext{
width:100%;
}
Couple notes: the '3' fields to the right of the image div, will have varying data in them.. (meaning I am not clear if they will need to wrap or not...hopefully not a problem)
The second portion of the question, is about implementing some dynamic capabilities. (jQuery I imagine should work)..
2.) Knowing the general (perfect scenario) layout I am trying to achieve above...
I need to also code things in a way.. that is certain parts of the data are MISSING, then that 'cell' (div) is removed/hidden (or something)
*(I am building this using PHP printed to screen, to spit out the HTML/DIVS..etc and using variables to populate the content of the DIV/image..etc)
So for example..
if the IMAGE was not there (variable is empty).. Id like the the CUSTOM div that has 3 child divs in it 1 for each of the text fields) to expand all thew way to the LEFT.. as the logo/image DIV will have nothing (or be removed/hidden since its empty)
Same goes for the text fields in the CUSTOM DIV container.. if one of those fields are BLANK... its should NOT just have a blank/empty placeholder... it should be removed/hidden.. and the rest of the data butted up to the TOP (under any other fields that may be present)
I've seen examples (sorta) where you have some DIV blocks on the stage.. click on one.. it removes it.. the other DIVS move over...etc... (sorta the same thing, except I cant manually click things to remove them)..
So maybe some jQuery to go through the 'DIVS' see if its empty and then remove itself?
-or-
would just having some sort of layout that is fluid/liquid work? be better? so I dont really need to check if its empty.. if nothing is IN the cell/DIV.. then the other just adjust their WIDTH/POSITION to make-up for it?
Let me know what you guys think? JSFiddle examples are appreciated!
Thanks!
to get the layout in question one you do like this...
#divA {float:left;}
#divB {float:left;}
before divC you can put an empty div (id="empty") like this...
#empty {clear:both;}
this should fix the design, assuming you have your width seth on the divs...
for question 2 i suggest you create the divs dynamically, when you create your content on page... if you want examples, just let me know...
There are a lot of properties you can set on your divs, one is max-width... one risk of not setting any value on width on your divs is that if your total width get wider than your holding container your divB will stack up under divA... and i think you dont want that to happen... :) you can do some experiments with min-width and max-width on your divs to get the behavior you want because i guess you have some values on your pic to play with...
divA {
float:left;
max-width:50px;
}
divB {
float:left;
min-width:400px;
}
as example, you have to find your values, trial and error-way i guess...
there is also a lot of guides on internet if you search on css and positioning... happy hunting!
This question already has answers here:
Select every Nth element in CSS
(4 answers)
Closed 7 years ago.
Let's say I have 860px width area, where I need put 4 divs (200px width) and 3 spaces beetween them (20px).
If there would be only 4 divs at all, I can use
.div {width:200px; margin-right:20px}
.div:last-child {margin-right:20px;}
But there can be any number of divs, but only for comes to one line, so I can't use last-child. But width of one line is always 860px.
How to remove margin-right from fourth div in line? Or how to make this spacing correctly?
If you are targeting every 4th div element, you need to use nth-of-type with an expression of (4n+4) so it will select every 4th element.
div:nth-of-type(4n+4) {
color: red;
}
Demo
Note: Am using a general element selector here, so you need to add a
. before the div as you are using a class named .div
So what you need is a grid system, use nth-child:
div{margin-left:20px;}
div:nth-child(3n+1) {
margin-left: 0;
}
This
.div:nth-child(4){margin-right:0px;}
should work.
But I think you could simply do:
.div{margin-left:20px;}
.div:first-child{margin-left:0px;}
Because the first element will never change.
#Mr. Alien has given a best answer. But in your case you can do like this also (as if of your full width)
<div id="main">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
</div>
when you give margin-right to #main > div the last one is also have margin,
so alternatively you could do
#main{margin-right: -10px; /*what margin you have given to #main > div */}
Someone has posted answer with this
.div + .div{margin-left:20px;}
but deleted it.
It works for me and looks nice. Is it correct way to do this?
I need a two column table with one word in the left column (e.g. name, biography) and with details for each in the right column. I have tried:
<div id="container">
<div id="left_column">......</div>
<div id="right_column">......</div>
</div>
This looks fine if the right column only has one or two words, but for longer entries such as 'bio' the second div's info snakes underneath the left_column div.
What's the easiest way to achieve the two columns without this happening?
You need to float them, and set some widths.
#container {
width:100%;
}
#left_column {
float:left;
width:20%;
}
#right_column {
float:left;
width:80%;
}
Note: If you only float them, and don't set widths, they'll still snake under each other when the browser window gets narrow.
Use the CSS property to make it a floating element and display:inline-block doesn't work on all browsers.
float:left;
You could also you <span> which by default won't wrap.
I have a container background defined in CSS like this;
.container {
background:#fff;
margin-left:auto;
margin-right:auto;
position: relative;
width:970px;
border:1px solid #000;
padding:5px 10px;
}
The problem is I have a jqGrid put in the bottom of the container (near the bottom edge) and when its initially drawn it does fit inside the container panel and looks correct. Something like this (please pardon my non-l33t graphic skillz):
alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg
But then when I populate the grid with rows it outgrows the container and it looks really tacky, something like this (I circled the original container background edges):
alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg
I am sure its something I am doing wrong with the CSS. Any advice would be appreciated.
EDIT: The problem isn't the width its the height of the container being overlapped by the new height of the now populated grid
I've seen this happen many times when you have floats inside. Add a clearing div just before closing container. You should always clean up after floats.
<div class="container">
<div id="nav" style="float:left;">
...
</div>
<div id="grid" style="float:left;">
...
</div>
<div style="clear:both;"></div> <!-- this does the trick -->
</div>
I disagree with adding float to container. Although this will work, having unnecessary floats will give you more problems down the road. Only use floats where necessary and clear it when done floating.
Also in my experience, overflow doesn't mean anything here unless you define height. I don't think setting overflow on container fixes the issue here. Correct me in the comments if I'm wrong.
.container { overflow:hidden; }
assuming you are dealing with floats, this is one way to make the container actually contain them.
Your container is fixed width and won't grow. What you're probably looking for is min-width. In other words, change:
width:970px;
to:
min-width:970px;
As a note, IE 6 and 7 treat width as min-width, but other browsers do not.
I think you need this in your CSS:
overflow: auto;
Depending on your float situation for the container and the inside grid, you can do a number of different things. You might be able to get away with just adding a clear,
clear:both;
You also can float the parent. This is called, setting a float to fix a float. So if your grid has a
float:left;
Then you can just add
float:left;
to your container css. I really like the Complex Spiral article on containing floats.
I am trying to put 2 columns into a website, I've got that to work fine but for whatever reason, the rest of the page doesn't change size to suit the content in the left column. Here is how it looks: www.kelownafoodspecials.com/indexsides.php.
Pretty stuck so any advice would be greatly appreciated. Thanks,
K
You should add <div style="clear:both;"></div> directly after your #contentright
you must float your #content div also. For any elements decalres as float:left(or right), if their containing elements are not also floated elements, the containing elements will not expand to fit the content and it will overlay it's containing element as you are seeing there.
Try this (assuming none of your content is meant to overflow)
#content {
overflow: hidden;
}
I just tried it using Firebug, and nothing appears to be chopped off (and the #content will expand to contain it's floated child).
You could append a <div class="clear"/> whose style could like like:
.clear {
clear:both;
display:block;
float:none;
}