As part of creating a typical left, mid, right column layout, I need to wrap some inner divs of various height into an englobing/parent div. I need to make sure the global/parent div is as high as the highest inner div, which depends of the text it contains. The min-height property won't cut it.
How should I proceed? Should I use tables and cells instead of divs?
I am including a JSFiddle to describe the issue.
I guess you want to achieve something like this: http://jsfiddle.net/Cj75q/3/
If I'm right you don't need all these relative and absolute positions, all you need is float left of the columns:
#leftCol {
background-color: #123456;
width: 23%;
margin: 0px;
border: 0px;
padding: 0px;
float: left;
}
#midCol {
background-color: #654321;
width: 50%;
margin: 0px 10px 10px 0px;
border: 0px;
padding: 10px;
float: left
}
#rightCol {
background-color: #567890;
width: 23%;
margin: 0px;
border: 0px;
padding: 0px;
float: left;
}
Please write your code here and then I think I can help you to find your solution.
In normal situation, the global div usually has the height of highest inner div. But I don't know what is your problem exactly.
I think this code can solve your problem. JSFiddle
But I suggest you to use table in this type of situations. Because the float and width properties on div tag can cause serious problems in some browsers.
Related
http://jsfiddle.net/hga7Lxt8/1/
float: right;
margin-left: 10px;
There is no margin to the left of the orange-red box (the top borders of the rows reach right up to it), even though it has such style attribute. What is wrong?
You can see the real problem when you apply a semi-transparent background-color.
What you need to understand is that content floats around a floating element, not containing boxes (unless they also float or have a display property set to something other than block).
You fix it by setting margin-right: 110px; on your .row:
http://jsfiddle.net/hga7Lxt8/4/
What you want to achieve can only be faked and would not "work" if your floating element has any transparency (or box-shadows).
The row elements are continuing behind the orangered box. Try:
.right {
float: right;
width: 100px;
height: 100px;
background: orangered;
}
.row {
border-top: 1px solid;
overflow: auto;
margin-right: 110px;
}
http://jsfiddle.net/thrb5936/
I have а search page and want to prevent "top20" div section on the right to move below the section rounded by rectangle when I change the size of browser window.
CSS:
#search_parameters_border {
border: 1px outset gray;
float: left;
padding: 10px;
}
#searchBox {
background-color: white;
color: black;
text-align: left;
margin-bottom: 15px;
}
#categories {
line-height: 20px;
height: 420px;
width: 250px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#additionalFilters {
width: 700px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#top20 {
width: 650px;
padding: 5px;
margin: 5px 5px 5px 50px;
float: left;
}
The screen shot:
Since you don't have a containing element for your floats, the phone is allowing your last float to get pushed down below where you're not wanting it to go. It's generally a good idea to use a "container" or "wrapper" div as you'll see them referenced to at times with your site's maximum allowed width to surround your builds (or min-width if you want to get a little fancier.) It will solve your issue as well as help you stay organized. As well, like in this situation, if you run into problems, sometimes it can be faster to just set a property in your "container" div to "position:relative;" and then position the div you're having trouble with absolutely via "position:absolute; top:100px; left:50px;" or something similar for spacing. If you have any questions about anything above or in the other comments let me know and I can explain in more detail.
As you're using absolute values for all widths you need to give a min-width to the surrounding container. Than you're top20 div will not move.
But you should consider making you're style more fluid.
I'm not quite sure why, but i cannot for the life of me figure out why my div is offset to the right. I'm still a little confused on positioning so i may have made an error there.
Here's the code i have on my container div:
#box{
padding: 5px;
margin-left:auto;
}
If you take a look at the Fiddle i posted below you'll notice that there is more space on the left than the right. If you don't see it, try expanding the preview window. Any help is greatly appreciated, thanks!
http://jsfiddle.net/Ya6A3/1/
It's because the element .large was being absolutely positioned.
You would remove position:absolute from the element and add vertical-align:top to fix vertical alignment issues. It's worth noting that an absolutely positioned element is essentially taken out of the flow and doesn't take other element's position into consideration. The element was thus positioned relative to the box's containing block
UPDATED EXAMPLE HERE
.large {
margin-left: 25px;
vertical-align: top;
border: 2px solid;
margin-bottom: 15px;
display: inline-block;
border-radius: 25px;
background-color: black;
opacity: 0.4;
height: 42em;
width: 30em;
padding: 0;
}
I apologize if this is a trivial question but I can't seem to figure it out. I have this website and I need the navigation bar on the side, and the rectangle all the way on the right (The one with the "ContentExtender" class) to stretch down to the bottom of the physical page (well, the ContentExtender only needs to stretch as far as the content so it blends, but that's another story). What is the simplest way to do this? I looked it up and found setting the Body's height to 100% should work, but it didn't. I know that's a lot of code to look through, so here is the actual important parts of the code (anything prefixed with "cc" was just an easy way of commenting them out):
.ContentExtender {
background-image: url(bgblack.png);
min-height: 10px;
ccmin-width: 200px;
ccwidth:100%;
margin: 0px 0px 0px 1010px;
position: absolute;
top: 110px;
right: 0px;
left: 0px;
}
.MainParent {
position: absolute;
left:0px;
top:0px;
right:0px;
bottom: 0px;
background-color:rgba(70,70,70,.7);
min-height: 600px;
min-width: 1000px;
max-width: 1000px;
height: 100%;
margin: 0px 10px 0px 10px;
z-index:100;
overflow: hidden;
}
You need to give html, body { height: 100%; } plus make any other parents of the element you want to have height: 100%;, height: 100%;
I recently had a problem where I could not extend to the top of the window, which may be similar. I set:
body {
margin: 0px;
}
In your case, it may be another element. I have seen where all possible elements are intentionally set to a 0 margin, and then the margins desired are re-implemented.
seems like there's a small error in your code try editing your
.ContentExtender
and change it to
#ContentExtender
Then you will be able to fix it, if this method doesn't work try setting the background CSS on the HTML tag of the Content extender like below
html{
height:100%;
background:#ccc url(bgblack.png);
}
the above is an example, so please improvise
Your issue is linked to the fact that a child div cannot directly dictate the behaviour of a parent.
Try one of these on your parent div:
overflow: auto;
display: table;
Or in the child div:
display: table-row;
When you try it, experiment with omitting the "height: blabla" attribute.
Similar problem solved: [1]: CSS - Expand float child DIV height to parent's height
I just stumbled on a problem where the shared border between a menu bar and the main content box does not go on properly (as the content box is too small)
Image: http://imgur.com/O3ra9
Code: http://jsfiddle.net/gh55e/2/
So I was wondering if there was a way to fix the border. Maybe by giving them both one and making it overlap? Just have no idea how to do this as margin -x doesn't work.
Give the right element a border all around, then use the margin-top and margin-left properties in the negatives to make them overlap. Here's an updated jsfiddle:
http://jsfiddle.net/gh55e/4/
CSS:
#right {
width: 85px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-top: -54px;
}
For later visitors, this is the CSS that eventually fixed it.
#right {
width: 385px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-left: -10px;
}
You basically make a margin of 10px and move it back for 10 px