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/
Related
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.
I have a div and an image inside it
<div>
<img src="logo.png">
</div>
img {
float: left;
}
I can see the div have collapsed, the height have become to 0,
my first question is, but the image is inside the, cuz the div's height is 0,why the image still can be see?
I know the solution like give the div a overflow property, even to auto. But why it can solve the problem?
By default, a parent element will not wrap around floated content. (It would be annoying in many situations if it did.) So if you want it to do so, you need to force the container to enclose the floated element. overflow: hidden; is one way of doing it, though it's not always a viable solution. There are quite a few other ways of doing it, too, such as the "clearfix" method.
The overflow property works to contain floats because, to obey the rule, the containing element has to 'look and see' what's inside it. Normally, floated content is taken outside the document flow and mostly ignored by other elements.
Here are some other containment options for that div:
The "clearfix" method:
div:after {
content:"";
display:table;
clear:both;
}
Floating the container:
div.contain {
float: left;
width: 100%;
}
Using display: table:
div {
display: table;
width: 100%;
}
Using display: inline-block:
div {
display: inline-block;
width: 100%;
}
Using position: absolute;:
div {
position: absolute;
width: 100%;
}
Some of these are more useful than others, and context will determine which is and isn't appropriate in any particular layout. Generally, I stick with overflow: hidden unless some content needs to hang out of the containing element (such as in a drop down menu), in which case I'll normally use the "clearfix" option.
Floating elements doesn't affect the size of the parent element. As the div only contains floating elements, there is nothing that gives it height.
By setting the overflow style on the parent element (to anything but visible), you force it to contain its elements, so that they can be scrolled.
By not setting a specific size on the parent element, it will get the size from its children, and you don't get scrollbars. As the children are now contained, the floating elements will affect the size of the parent.
An alternative to using overflow on the parent element, is to add a non-floating child after the other, and use clear: both; on it so that it's below the floating children. That way the parent will contain the children because of that last non-floating child.
The code sample below works almost the same, if I include or remove the 'float: left' line. The only difference is the float left version moves the blocks below it up a bit more, but not more than a line break. I don't understand why you would add floating to an element set to 100% width. To my understanding,this prevents everything below it from flowing around it. Isn't that the purpose of floating?
ul
{
list-style-type: none;
float: left;
width:100%;
padding:0;
margin:0;
}
li
{
display: inline;
}
The reason why this works is because your <li> display is set to inline. This means that all elements with of this HTML tag will show up on the same line as all other ones. In other words, there will be no line-break. I would suggest the following instead:
ul {
list-style-type: none;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden; /* This will ensure there's a line break after using float for the list items */
}
li {
float: left;
}
This way you can ensure that each list item can also use margin and padding properly as opposed to inline elements which act as characters in a string of text normally would.
The float property is meant to allow an object to be displayed inline with the text directing it to one side. Float left is thus a lot like inline but with the exception that the element being floated is aligned towards the left or the right. It is not necessary to use the float:left; flag for what you are trying to do, It can often be better to place the ul where you want it using position, margin, padding, left , top , right , bottom instead. This usualy gives a more controllable result.
Here is an example fiddle of what happens when switching between no float and float left.
http://jsfiddle.net/um9LV/
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box or another floated element.
float:left - use float to get block elements to slide next to each other
display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
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.
I am struggling with a CSS issue. I want to display a Google +1 button next to ShareThis buttons (I am using Drupal).
For some reason, Drupal adds a panel searator CSS class:
I tried to modify my CSS file as following:
.panel-separator { display: none; }
but it only produced this:
There is enough space to the right of the ShareThis buttons to display the Google +1 buttons. But, the buttons are stacked on top of each other.
How do I get the button to align horizontally? Thanks.
Update
I have set a lot of width and I also added float: left;:
.GYPO_social_buttons {
padding-top: 91px;
width: 200px;
float: left;
}
.GYPO_share_this {
width: 90px;
}
.GYPO_google_plus_one {
width: 40px;
}
Here is the enclosing div according to firebug (I am using Firefox):
Update II
Woops, my bad. I have now set the float: left; on the button themselves rather than the enclosing div and the issue is solved. Thanks !!!
.GYPO_share_this {
width: 90px;
float: left;
}
.GYPO_google_plus_one {
width: 40px;
float: left;
}
You need to give enough width to the container div, that is holding these icons. After that you can float these icons by giving float: left; . The reason why Google +1 is moving down is because the container div doesn't have enough width to accommodate this next to mail icon.
From the portion of html and css you are providing it is a little bit difficult to find out what would be the best way to do this. The question is what generates the break. It could be that the parent element is not wide enough to and the +1 needs to be below. In that case you can simply change the width. It could also be that there is css that generates a break (e.g. display: block and no float for on eof the elements) In that case you might try to change that to display: inline or a float: left for the buttons. There might be a clear somewhere in there which would cause the float to break (although it doesnt look like a clear on the image)
I suppose there are more possibilities than that...
I need to see more of your code. If you have tried to make your container larger to hold all of the icons and that didn't work, I would guess it was another element forcing the icon to the next line. Without more code, all I can do is make a guess...
I was in the same situation once. Here's what solved my problem:
You can also choose the "style" setting on the region and choose "No markup at all". This will remove the panel separator.
For more info: https://www.drupal.org/node/579020#comment-8163459