I know this question has been asked many times but I am having difficulty in finding out in what is going wrong with the code in my case.
I have a wrapper div with a number of other divs contained within it. Some of those divs are side by side using float: left; ect. and the layout is almost exactly as I would like it. However for some reason the wrapper divs border is not extending all the way to the footer element when the wrapper is NOT float: left;
Example:
http://jsfiddle.net/8wVdm/
However when I add float: left to the wrapper div the border does extend all the way like I want it too:
http://jsfiddle.net/C5kTh/
However the problem with this is that the wrapper div is then not automatically centered. How do I fix this?
You'll want to research clearfixing, which is a set of css rules that force a container to wrap around any floated elements it contains:
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
here is a nice detailed answer on how they work.
here's an updated fiddle with a clearfix added.
Related
after reading this article:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
i am trying to achieve vertically stacked divs each containing 2 child divs positioned to the far left and right of each parent div. i found the same concept here:
Position absolute but relative to parent
but I can't figure out why mine isn't working.The in-progress file can be viewed here:
https://dl.dropbox.com/u/10388895/newPeterSalvatoDotCom/index.html
Any help would be greatly appreciated.
One way to fix this would be to give the projectDivs a height. They currently collapse to 0. Add the following to your stylesheet and see what happens:
.projectDivs{height:600px}
I think setting these rules to the .projectDivs class get what you want done. Let me know if they don't.
.projectDivs {position: relative;
margin-bottom: 50px;
clear: both;
float: left;
margin-left:auto;
margin-right: auto;
width: 100%;
}
i set the margins individually because you have a margin bottom set already.
This is giving me such a headache i just have to ask. I never seem to have trouble with C# or Java or SQL or JS as I have with CSS, and i spend too much time trying to figure things out.
I have a table div and some row and cell divs inside it. And i just want to make table div to be of exact height.
My current style:
div .table
{
width: 410px;
height: 410px;
max-height: 410px;
display: table;
border-spacing: 10px;
border-style:dotted;
border-width:medium;
overflow: visible;
}
What else do I have to do to make div exactly 410 px high?
I tried wrapping it in a outer div (with blue borders in picture with specific height and display:block) but table div does not seem to notice it. I added a div with clear:both at the bottom, sometimes it helps but not today...
It appears that:
display:table;
will force the element to expand to fill the width of the content. Even if you set "overflow" to be hidden.
Here's a fiddle with some examples:
http://jsfiddle.net/dRLfv/
I think you'll need to do a regular "display:block" and then set overflow appropriately. That would probably require you to adjust some of your other styles for the table/form elements inside but that should be double and I'm sure others will be happy to help.
I hope that helps!
Cheers!
Example of the problem at: http://jsfiddle.net/xZmFg/4/
Surely there is a way to get the description to immediately follow the inputs (below, not to the right) and not end up below the menu...
I realise that with 'float' you are breaking out of the flow of the content, but isn't there a way to only apply to the space inside of the parent container?
You can have your description's and form inputs' parent element contain all their floats using overflow: hidden:
.content-box {
overflow: hidden;
}
This way, they won't interfere with the floats on the sidebar elements.
jsFiddle preview
You can float the container around the inputs and your paragraph:
.content {
float: left;
}
And then drop the clear: left; on .description as it doesn't do anything (or leave it in).
http://jsfiddle.net/ambiguous/QdY44/
I've been looking at this for the past days now and I'm at the point where I need to ask for help.
http://cub.northnodes.com/index.php/about/mission/
I need the donate now column to float all the way to the right, but it only goes halfway. I can't figure out why it's stopping there, there's no containing div that ends there. I've tried to take it out of the #center div, and have placed it both before it with no better results. Placing it after the #center div makes it float left all the way beautifully, but below the #center where I don't want it to be.
In case others come later:
I had a similar issue where float right would only move halfway across its containing div. Neither it, its siblings, or container had position relative. However, the containing div's prior sibling also had a child with a float: right; (coincidence that it was the last child; not sure?). I solved my problem by adding a clear: both; to the div containing the offending floater. This was on Chrome.
This happened to me because I had set max-width on a parent container. I removed that and my element floated all the way to the right properly.
In my case clear: both; didn't solve a thing. Somewhere above there must have been a margin-right: 2em or something like that which was being carried over.
In my CSS then I just had to insert margin-right: 0px; and the image was then flush to the right side of the page.
Had a similar issue, Items were floating right/left/center (just not all the way right or center).
I fixed it by putting justify-content: space-between; in the parent container.
My final css for the parent looks like:
parent {
position: fixed;
bottom: 0px;
width: 100%;
display: inline-flex;
justify-content: space-between;
}
What's the simplest correct way of aligning images without gaps horizontally within a div?
If possible I would not like to wrap every image in a div and I would not like to use a list. I'm rather looking for the proper CSS to achieve this with minimal markup.
The biggest problem are the gaps between the images which I can remove by setting the font-size to 0 wich is ugly and works only for Firefox.
<div class="images"><img1><img2><img3></div>
.images {
display: inline;
...???
}
A good way to do it would be to float the images.
However, be sure to add an overflow attirbute to their parent container to ensure it goes all the way around them,
Adding a margin would also neaten them up.
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}