I am trying to position few elements correctly, here is my code: http://jsfiddle.net/Tjz6D/
Now the problem is that block_under doesn't go below image, i've noticed that if delete all floats everything is fine but i need floats for two divs that contains text to be in the same level as image.
So what's causing block_under to overlap with image?
Add the clear property:
#block_under{
outline:1px solid green;
clear: both;
}
Use clear:both on the block_under element.
Demo at http://jsfiddle.net/gaby/Tjz6D/1/
Related
I'm trying to create a "pattern" of divs that looks like this:
However, currently it looks more like this:
resulting in my page looking something like this:
In that final snip, everything is also pushed to the right. Ideally, I need the assembly to be centred. The Get Conditions button should also reside underneath the Print Runs textbox, as they both reside in the same div, and be centred beneath the two upper divs. The dropdown lists and radiobutton list are both where they should be.
I toyed with floating the bottom div, but the various things I tried mostly resulted in the lower div taking up more space between the two upper divs.
I have pasted the HTML and CSS in a JSFiddle, please bear in mind that it doesn't recognise ASP tools so doesn't give an accurate preview of what I'm trying to achieve.
https://jsfiddle.net/h4tr31gt/1/
This doesn't directly address your question of floats, but you can achieve the same result by using flexbox.
https://jsfiddle.net/gnw634gv/
.container {
background-color: lightblue;
height: 400px;
width: 100%;
display: flex;
flex-flow: row wrap;
}
.block-top {
width: 50%;
background-color: yellow;
height: 50%;
border: 1px solid black;
box-sizing: border-box;
}
<div class="container">
<div class="block-top">A</div>
<div class="block-top">B</div>
<div class="block-bottom">C</div>
</div>
As DaniP has suggested clearing floats would solve your issue. What float property does is removing your element from the actual page flow and aligning it according to your float value either right/left. So, when you try to add other element after the floated elements, it will occupy the page as if the floated elements doesn't exist. That is why you see that it is moved up. Also, floating the next element without clearing the previous elements floats will have the same result as without float. Hence, you need to clear the float using clear:both/right/left so that the surrounding of floated elements are cleared and you can align elements. You can check more on floats/clearfixes as some new things keep on arising every now and then. You might find it more clear.
add a class of clearfix to the parent div, like so:
<div class="clearfix"> </div>
then add the following style to your css:
.clearfix {
clear: both;
}
You can then reuse this anywhere else you are using floats.
https://jsfiddle.net/c3rLqce7/
I want to display some background images along with some text. Everything should be divided by a | (pipe) to separate the elements.
The pipe is included with an :before selector with the pipe as content.
However it seems that this breaks the layout as the background images are now not longer on the same line as the text. If I remove the content completely it works as expected.
What is the reason for this and how can I fix it?
I've created a small Fiddle as example.
Your layout uses float: left so :before should follow the same rule. For example:
.list-piped:before {
display: block; /* fix */
float: left; /* fix */
content: "|"; /* This breaks the layout */
}
https://jsfiddle.net/infous/1cbeyn84/4/
BTW, Manoj Kumar below has described the real problem. My answer is a possible solution because float: left as well as position: absolute has its own flow.
Why does this happen?
Check out this Image. Technically ::before is part of li(.list-piped) and takes up the whole width, pushing the child items(icons) to bottom.
How to fix?
Apply ::before to child elements or use position: absolute to the current code.
Updated JSfiddle
I'm trying to have an image, and then to the right of the image I want a div box to be there. I've been trying to search for the reason for this, but I cannot find it. I'm assuming div's can't be floated next to images for some reason because I've successfully done it with text.
http://jsfiddle.net/n8ZDQ/1/
(you can see the red div box is actually mostly behind the image, only part of it is popping out the right side)
HTML:
<img src="http://stignatiusyardley.org/pictures/NFP/NFP%20family%20image.jpg" style="float:left;width:370px;height:246px;" />
CSS:
#optin {
width:466px;
border:1px solid #CCCCCC;
height:166px;
background-color:red;
}
The div itself is not floating! Try adding float: left to #optin.
The DIV is a block level element by default. Only inline or inline-block elements will display the way you want. To get the effect you need, you need to either make the DIV display: inline-block or float: left.
Adjust the css of #optin to float as well
#optin {
width:466px;
border:1px solid #CCCCCC;
height:166px;
background-color:red;
float: left;
}
I have used a wrapper to center div tags and it works for everything except the css in the link
Please check out:
http://jsfiddle.net/T5rBU/3/
As you can see the pink box with text is in the center but the black box isn't.
I have put
float: left;
but that is only because if I don't the black box doesn't show!?
try this:
.center div {
display:inline-block;
text-align:center;
}
it seams to work:
http://jsfiddle.net/u3ggV/
add a with to .center
.center {width:400px;}
or another width you cant center div with text-align
I don't quite follow what you mean but I think it could be down to not having a wrapping element to hold both divs - http://jsfiddle.net/djsbaker/T5rBU/4/
Did you want the black box beside or above/below the navigation?
I cannot get the background to stretch behind the contentbox. The strange thing is, it works with Internet Explorer, but not with Firefox.
I hope it is enough to give you a link, since I do not know where the problem is in the code, it would not make much sense to post the whole code in here.
http://www.yiip.de/arbeit/testlayout/standard_template.html
You can also add overflow:hidden; to #shadow. That will clear the floats without having to put additional markup in your html.
try adding the following 'clearfix' style to your wrappers
.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}
.clearfix {display:block;}
You need to clear your 3 floated divs for the containing div to expand vertically around them. The easiest way to do this is to add
<br clear='both' />
after the third floated div (but within the container div).