css-float | 易学教程

Wrapper div height is 0 with floated elements inside

阅读更多关于 Wrapper div height is 0 with floated elements inside

问题 I have a wrapper <div> which contains two inner <div> s that are floating. <div class="outside" style="border:1px solid #555;"> <div class="inside" style="float:left; width:40px;">CONTENT</div> <div class="inside2" style="float:left; width:40px;">CONTENT</div> </div> The problem is the wrapper <div> has width of 80px since two inner <div> are 40px each. But always the wrapper <div> is 0px in height which makes the border appear like a line at the top. So I placed the two inner <div> s inside

Wrapper div height is 0 with floated elements inside

阅读更多关于 Wrapper div height is 0 with floated elements inside

3 columns, middle one with flexible width

阅读更多关于 3 columns, middle one with flexible width

问题 I'd like to have a layout that consist of three adjacent divs. Side divs have static width (it may change via javascript) and center div fills a remaining area. When the first div's size changes it affect only the center one. It is similar to table (with dynamic rendering) that consist of three columns. Ok, but where is the problem. The problem is that if I put floating-left div into the first column, and block div in the second and third one, block divs behave in a strange way. They are

CSS float weird behavior

阅读更多关于 CSS float weird behavior

问题 I have this weird behavior with float positioned elements. The parent element is 100% width, and 450px height. Child floated elements have percentage width and high. When I change the width of the window, some child element have minor changes in height. You can test it in this fiddle : http://jsfiddle.net/matthieubrunet/jsfww2e6/1/ Try to reduce the window, and you will see the purple div act weird... In my case (Safari and Chrome), it start changing height, and then jump to the right. I

Why a fixed element covers a floated element?

阅读更多关于 Why a fixed element covers a floated element?

问题 the Html is : <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="wp-1-main.css"> <title></title> </head> <body> <div class="wrapper"> <div class="textArea"></div> </div> <div class="imageLine"> </div> </body> </html> and the CSS is .wrapper{ width: 100%; height: 400px; position: fixed; top: 50%; margin-top: -200px; border-top: solid 1px black; border-bottom: solid 1px black; background-color: pink; } .imageLine{ width: 500px; height: 1500px; float:

HTML border problems with float when zoom out

阅读更多关于 HTML border problems with float when zoom out

问题 I have a div container, which is 800px width, that is separated into two by a single border(1px). div A (399px) is floated left while div B(400px) is float right. The problem is when i'm zooming out, the right border, which is div B, is being move wherein it place it at the bottom of the page. To fix it, I set the two div's width to percentage at 50% each -- I removed the border. Now when I add the border at the center (by setting border-right of div A), and also adjusting div A to 49.8%, it

CSS float property unexpected behavior

阅读更多关于 CSS float property unexpected behavior

问题 So i was examining the css float property when i noticed a strange behavior that i couldn't know its reason. This is a link to the code and preview of four divs, first two are floated right and left, third and forth just a normal divs. I do understand that the third div will get overlapped by the second one, however what i don't understand is why the content of the third div got shifted down, shouldn't it hide behind the second div? P.S i know the problem can be fixed using the clear property

CSS/JS: Floating block elements of differing heights?

阅读更多关于 CSS/JS: Floating block elements of differing heights?

问题 Here’s what I'm working with. As you can see, I’ve got a lot of block elements, that I want to get into five columns. However, since they’re of differing height, they don’t respond well to being floated. (Hence the huge hole in the middle of the page.) I know I’ve seen a JS workaround, that calculated the heights and put the elements where they’d fit, but I can’t for the life of me find it now — anyone remember it, or have any other ideas? ;) 回答1: Maybe what you'd like is: http://desandro.com

Float right in rtl css

阅读更多关于 Float right in rtl css

问题 Now I have this set up in css .one-half{ width: 305px; margin-right: 30px; float: right; } .feat-cat .last-col{ margin-right: 0; } .feat-cat{ overflow: hidden; margin-bottom: 30px; direction: rtl; } when i do this way (.feat-cat .last-col) disappear as you can see How do I do it correctly?? this is the site that i work on it http://hossamyehia.com/wordpress/ 回答1: For RTL layouts there are several properties you need to flip. These include, but are not limited to: background background

why is one of two floated divs are pushed to the next line?

阅读更多关于 why is one of two floated divs are pushed to the next line?

问题 I have two divs which I want to place in one line, the first one with a fixed width and the second without a set width. If I try to set both to float:left, the second div would go to the the next line if it contains too many words. But if the second one is a non-floated one, it stays in the same line with the first div. Why? .left { float: left; width: 250px; height: 300px; background-color: red; } .right { /*if set to float:left, it might goes the next line*/ /*float: left;*/ height: 300px;