I need to display text around a floated element that itself has been pushed downwards. The HTML/CSS is very simple:
<div id="container">
<div id="shim"></div>
<div id="myimg"></div>
<p>This is a test to demonstrate the float overwriting issue. The blue box represent an image that I don't wish the text to overwrite...</p>
</div>
CSS:
#container {
width: 200px;
}
#shim {
float:right;
width: 1px;
height: 40px;
background-color: red;
}
#myimg {
clear:both;
float:right;
width: 100px;
height: 40px;
background-color: blue;
}
It works perfectly in Chrome and Firefox, however in Safari the text overwrites my floated element.
I've created a fiddle to demonstrate the bug (obviously, you'll need safari to see it):
http://jsfiddle.net/8JLFp/
Can anyone find a solution or suggest another way of doing this?
Please check the same issue on this site. May be this helps you.
Possible Solutions.
Try adding clear:both divs
Use overflow:hidden
I know this might be an old question, but its still valid today.
I got mine fixed by adding to the parent tag :
style="width: 100%;"
Which in your case, the div with id=container.
Hope this helps.
Related
JS Fiddle: https://jsfiddle.net/7p81bnto/2/
HTML:
<body>
<main>
<div>
<div style="
height: 50px;
width: 200px;
background-color: green;
float: right;
"></div>
<div style="
height: 50px;
width: 100%;
background-color: yellow;
display: table;
padding-top: 50px;
"></div>
</div>
</main>
</body>
Viewing these in Firefox and Chrome gives different layouts.
Can anyone explain why that is the case. I suspect it is related to the display:table property, but I don't really understand why.
For annoying reasons, I can't remove the display:table, but I need to get the body of the lower div lined up below the floating div.
Can anyone suggest how to achieve this consistently across both browser?
You can add:
float: right
to both divs and achieve the same look in both browsers.
Fiddle: https://jsfiddle.net/75ux730g/2/
It turns out that {clear: both} also achieves a correct look, and I think is arguably a better solution (by which I mean, one that ends up with CSS that more accurately reflects my design desires.)
I am trying to achieve the following layout in html. Bigger div 1. Then another div next to it with a margin on the top. If I give float: left to the first div, on giving margin-top to the second div also brings the div 1 down. :(
please suggest.
Here's what you want, tested and working :)
http://jsfiddle.net/4FWWp/
HTML
<div id="first"><p>Hello<br/>Test</p></div>
<div id="second">World</div>
CSS
#first{
background-color:red;
float:left;
}
#second{
background-color:blue;
float:left;
margin-top:52px;
}
Take a look:
http://jsfiddle.net/Dc99N/
.d {
display: inline-block;
border:2px solid;
width: 200px;
height: 200px;
}
.sm {
margin-top: 50px;
height: 150px;
}
Took a quick stab at it and it seems possible.
What you need to is display inline-block on the divs and set the height of the divs as percentages.
Check out my codepen : http://codepen.io/nighrage/pen/bKFhB/
The grey background is of the parent div.
Flex-box could be the best and easier solution.
IE supports it since version 11, and currently all major browsers have a good support. Maybe is still a little soon but.... I think that in few months could be a very interesting feature.
Please, look at Flexible Box Layout Module
When I assign a percentage height in the following div, why does it get out? Thanks you in advance.
HTML:
<div id="div1">
Test<br/>Test<br/>Test<br/>Test<br/>
<div id="div2">Test</div>
</div>
CSS:
body{
margin: 0
}
#div1{
position: absolute;
width: 200px;
height:100%;
right: 0;
background-color: #467
}
#div2{
width: 50%;
height: 99%;
background-color: black;
color: white
}
Well, the reason why #div2 extends below #div1 is because in addition to being 100% the height of its parent, #div2 is also pushed down by the four lines of text above it - so it extends exactly that distance outside of #div1.
How to solve this, then? Well...I can offer a CSS solution, but it's not very flexible (a solution that employs JavaScript would definitely be more scalable, and less work to maintain). I modified your HTML structure slightly, so now it looks like:
<div id="div1">Test
<br/>Test
<br/>Test
<br/>Test
<div id="div3">
<div id="div2">Test</div>
</div>
</div>
To clarify my changes, I added the #div3 element around #div2. Now, for my CSS, I just added this definition for #div3, and modified the body CSS to:
body {
margin: 0;
line-height:1.3em;
}
#div3 {
position:absolute;
top:5.2em;
bottom:0;
left:0;
width:100%;
}
This approach requires that you know how far from the top of #div1 you want #div3 (and its child #div2) to start, which by extension requires you to know exactly how tall those four lines of text are. Since browsers often render text with slightly different line heights, I specified one for the <body>. After that, it is a fairly simple matter of multiplying that line height by the number of lines of text (four in this case), and setting that as the top attribute.
Here's a JSFiddle to demonstrate what this achieves. I hope this answer was clear, and is what you're looking for! If not, let me know and I'll try to help further. Good luck!
it gets out because of the overflow property you are missing. Set it to hidden on #div2 ok?
good question. Test<br/>'s count as extra size. same if you use padding, it counts extra size. You can use position absolute to child element. I fixed the problem. check this fiddle
in div1, use position: fixed; instead of position: absolute;
jsfiddle
<div class="sectiuni_home_box" style="width: 626px; padding-left: 0px;">
<div class="sectiuni_home_box_t" style="border-left: 0; width: 618px;">
<div class="sectiuni_home_box_v" style=" width: 616px;">
<div align="left" style="width: 1px; border: 0; border-left: 1px solid #c3c3c3; float:left; height: 100%; padding: 0; vertical-align: middle;"></div>
<div id="actiuni" name="actiuni">
<table style="border: 0;"></table>
<div id="lista_actiuni" name="lista_actiuni">
<div id="actiuni_scroll" class="scroll" style="width: 100%; height: 428px; overflow-x: auto; overflow-y: scroll;">
</div>
</div>
</div>
</div>
</div>
This is the layout i'm talking about. the only div that has the float is suppsoed to be to the left of #actiuni and #lista_actiuni. Looks exactly like that in Firefox, but IE puts #lista_actiuni below everything else. It puts the float div to the left, the table to the right of it starting at the top but then when it's time to place #lista_actiuni it drops it all the way down to where the floaty div ends. To make it worse it sometimes corrects itself and places everything nicely, only to be broken again when I switch pages or refresh.
Any ideas on what could be causing it?
I've scrapped together a demonstration using code from the page. Closest thing I can get. The problem is that in the example it looks wrong both in ie and in Firefox but on the actual website it works corectly.
edit: edited the jsfiddle, replaced with a version that works properly in Firefox yet fails in IE.
update: it seems removing the #actiuni_scroll div and the table within it and leaving only the bare data i've managed to make it display properly so my guess is that's where the problem is
update 2: I've fixed the problem by removing the width attribute from the #actiuni_scroll div. It seems firefox know how to calculate the 100% width to include the elements floated to its left but IE doesn't.
Completely off the top of my head (without anything visual to play with) I reckon you could try adding overflow:hidden to the .sectiuni_home_box_v div.
Floats need to be cleared, it does not look like you are doing this.
HTML
<div class="sectiuni_home_box_v">
<!-- IE6 has problems with more than 1 css rule & IE7 does not recognise psudeo's SO -->
<br class=clearfix />
</div>
CSS
.clearfix{
clear:both;
visibility: hidden;
height:0;
*zoom:1;
}
NOTE: IE7 will apply double margin to some elements and in some cases
double padding, you can do a quick fix with a css rule {
*display:inline;*zoom:1; }
I've fixed the problem by removing the width attribute from the #actiuni_scroll div. It seems firefox know how to calculate the 100% width to include the elements floated to its left but IE doesn't.
After lots of attempts and search I have never found a satisfactory way to do it with CSS2.
A simple way to accomplish it is to wrap it into a handy <table> as shown in the sample below. Do you know how to do it avoiding table layouts and also avoiding quirky tricks?
table {
margin: 0 auto;
}
<table>
<tr>
<td>test<br/>test</td>
</tr>
</table>
What I want to know is how to do it without a fixed width and also being a block.
#Jason, yep, <center> works. Good times. I'll propose the following, though:
body {
text-align: center;
}
.my-centered-content {
margin: 0 auto; /* Centering */
display: inline;
}
<div class="my-centered-content">
<p>test</p>
<p>test</p>
</div>
EDIT #Santi, a block-level element will fill the width of the parent container, so it will effectively be width:100% and the text will flow on the left, leaving you with useless markup and an uncentered element. You might want to try display: inline-block;. Firefox might complain, but it's right. Also, try adding a border: solid red 1px; to the CSS of the .my-centered-content DIV to see what's happening as you try these things out.
This is going to be the lamest answer, but it works:
Use the deprecated <center> tag.
:P
I told you it would be lame. But, like I said, it works!
*shudder*
I think that your example would work just as well if you used a <div> instead of a <table>. The only difference is that the text in the <table> is also centered. If you want that too, just add the text-align: center; rule.
Another thing to keep in mind is that the <div> will by default fill up all the available horizontal space. Put a border on it if you aren't sure where it starts and ends.
The following works well enough. note the position, and the use of auto
<div style="border: 1px solid black;
width: 300px;
height: 300px;">
<div style="width: 150px;
height: 150px;
background-color: blue;
position: relative;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;">
</div>
</div>
NOTE: not sure if it works in IE.
In FF3, you can:
<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>
This has the advantage of using whatever element makes most semantic sense (replace the div with something better, if appropriate), but the disadvantage that it fails in IE (grr...)
Other than that, without setting the width, your best bet is to use javascript to precisely position the left-hand edge. I'm not sure if you'd class that as a 'quirky trick', though.
It really depends on what you want to do, of course. Given your simple test case, a div with text-align: center would have exactly the same effect.
#wrapper {
width: 100%;
border: 1px solid #333;
}
#content {
width: 200px;
background: #0f0;
}
<div id="wrapper" align="center">
<div id="content" align="left"> Content Here </div>
</div>