css-float

问题 Hey my site is working fine except in IE8. The Menu bar is not displayed properly. My theory is the Float Left is not working but it could be something else. Also the font which is Calibri isn't showing up properly. Is there any way to fix these two problems. The website is eagleview.it This is the nav ul for index.css: nav ul { width:900px; list-style: none; margin:15px; position: relative; } nav ul li { display::inline;} nav ul li a { float:left; display: block; padding: 0 15px; margin:

问题 I originally had floating divs and i wanted content inside these floats to be vertically aligned. This was giving me troubles so i had to remove floats. I came around this fiddle referred in this post. And used the fiddle to get desired layout. But i am facing troubles vertically aligning divs. I tried, vertical-align:middle; display:table-cell; For parent containers and display: inline-block; for child contents. 1) In this fiddle. I want the right to be vertically aligned inside right

问题 Frequently in my projects, I use floated elements. This all plays pretty nicely until IE7 gets involved and starts mucking things up. Take this code, for example: HTML <div id="container"> <div id="element-1" class="left"> Some content </div> <div id="element-2" class="right"> Some much longer, more complicated content </div> <div class="clear"></div> </div> CSS .left { display:block; float:left; } .right { display:block; float:right; } .clear { clear:both; visibility:hidden; } In a lot of

问题 We're having a problem with a side pane that is floated to the right. This pane somehow resizes the first div in the main content, so the div is stretched to the same height as the pane, see illustration below. The main div has the following css margin: 10px 280px 0 10px; padding-right: 50px; The side pane has the following css float: right; width: 270px; margin: 10px 10px 0 0; What would make this happen? How can I fix it? This error occurs in Firefox 3.6 回答1: Try adding overflow:auto to

问题 What I need is to float both red elements on the side of the green one, stacked directly one above the other, in such a manner that the outer block will respect the total width of green + longest red. Output needed: Here is the fiddle: http://jsfiddle.net/r71bapbn/1/ So far HTML: <div> <label> <span class="icon"></span> <span class="text1">Some text</span><br /> <span class="text2">Some other text</span> </label> </div> CSS: div { display:inline-block; } label { display:inline-block;

问题 When working with a certain API, I am using a function that basically provides me with dozens of categories of settings. To display these, I opted to have a container DIV and split the settings by group (4x 25% width tables) where each group that is parsed appears next. This is working fine with the small issue of variable amounts of settings, resulting in a lot of unused space being left over. This is caused by me floating everything left, but the longest table causes the next table to

问题 I saw two column layout made as following way, but I didn't understand why it works. So what actually does the .col-sub do? If I remove margin-left:-100% in .col-sub , the Sub Content will fall down. If I remove float: left in it, the Sub Content can't show. What does margin-left and float do here? Demo can also be found here: http://jsfiddle.net/yougen/ATNh9/ HTML: <div class="wrapper"> <div class="col-main">Main Content</div> <div class="col-sub">Sub Content</div> </div> CSS: * { padding:0;

问题 I am trying to locate DIVs vertically from up to down inside container. Container should be limited vertically by 500px. All DIVs that couldn't fit in this limit should be floated to next row. <style> #container { position:relative; background-color:red; max-width:500px; min-height:500px; } #area { position:absolute; bottom: 0; background-color:yellow; margin:20px; width:100px; height:100px; } </style> <div id="container"> <div id="area1">area1</div> <div id="area2">area2</div> <div id="area3

问题 I have 2 column structure. The CSS used are as follows: .div-left { position: relative; float: left; width: 18%; margin: 1; } .div-right { position: relative; float: right; width: 81%; margin: 0; } I want a flexible structure in the sense, when one column is collapsed other should automatically take up space. I am trying to hide first column as shown below: $("#test").animate({width: 'toggle'}); This is hiding my First column, but the right column is not taking the space released by first

问题 Please note that I am not asking about correcting the problem but instead I want to know how floated div is getting margin when wrapper div has 0px border set. But when wrapper div has 1px border set then floated div doesn't get margin but in both cases secondDiv gets top margin as intended. Please note that I understand margin collapsing topic but what it has to do with setting border? <div id="container"> <div id="firstDiv">FIRST Div inside CONTAINER</div> <div id="secondDiv">SECOND Div