css-float

Can someone explain to me why clear:both and margin-top cannot work in the same div

由 南楼画角 提交于 2019-12-19 09:43:11
问题 I have already came across some explanations, including stackoverflow, but unfortunately, I still can't understand perfectly what is the cause of it. So, can someone please explain it in a simple way? Here is a question similar to what I'm asking but I didn't understand what is the cause. It fixed my problem, but I just want to know why. margin-top not working with clear: both Thanks 回答1: A margin is a minimal distance between an element and other elements in the same context. Floated

Vertically align floating DIVs

由 一笑奈何 提交于 2019-12-19 09:38:18
问题 I have a portion of a website I am creating that is as follows: <div id="topbar"> <div id="topbar_left"> <form action="Search" method="POST"> <label for="searchtext">Find Products: </label><input type="text" name="searchtext" id="searchtext" size="30" /> <input type="submit" value="Search" /> </form> </div> <div id="topbar_right"> You are logged in as Username • <a href="LogOut">Log Out</a> </div> <div class="clear"></div> </div> I would like for the text in topbar_right to be vertically

CSS container doesn't stretch to accommodate floats

由 非 Y 不嫁゛ 提交于 2019-12-19 05:05:10
问题 <html> <head> <style type="text/css"> .container { width: 900px; border: 2px solid #333333; padding-top: 30px; padding-bottom: 30px; } .container_left { border: 2px solid #FF00FF; width: 650px; float: left; } .container_right { border: 2px solid #0000FF; width: 225px; float: right; } </style> </head> <body> <div class="container"> <div class="container_left"> <div>LEFT CONTAINER</div> <div>LEFT CONTAINER</div> <div>LEFT CONTAINER</div> </div> <div class="container_right"> <div>RIGHT CONTAINER

Float unordered lists (UL) next to one another, and stack them at the bottom of each other, with no margins or spaces

由 。_饼干妹妹 提交于 2019-12-18 18:26:13
问题 I have multiple unordered lists (UL) elements. Please check the image below: what I want to do is float the ULs next to each other. The ULs have different lenghts of content (LIs), therefore some UL are longer than other. When I float ULs next to each other in a limited width div layer, at some point the last ULs float at the bottom / left. However... if there's a UL that is longer there will be some space. I wish the ULs to float left and to stack to each other, at the bottom of each UL

Div collapse after float css

由 隐身守侯 提交于 2019-12-18 10:41:58
问题 I have a div called NAV and inside of NAV I have an UL with 5 li which I float to the left, the li's that is but when I do that the NAV collapses. I know this because I put a border around NAV to see if it collapses and it does. Here is the example. collapsed http://img401.imageshack.us/img401/8867/collapsedze4.png no collapsed http://img71.imageshack.us/img71/879/nocollapsedkx7.png as you can see in the first image, the links in the NAV div are floated left and that black border ontop is the

How make middle div to fill space between floating elements?

由 生来就可爱ヽ(ⅴ＜●) 提交于 2019-12-18 10:33:51
问题 I have three div elements: left, middle and right. Left and right are fixed and floating. What I want is the middle div to fill the gap in between them. This is my code: <!DOCTYPE html> <html> <head> <style> * {border: dotted 1px red;} #left { width: 200px; float: left; } #middle { float: left; } #right { width: 200px; float: right; } </style> </head> <body> <div id="left" > left </div> <div id="middle"> middle </div> <div id="right" > right </div> </body> </html> Any ideas on how to do this?

Bootstrap 3 Multi-column within a single ul not floating properly

由 拜拜、爱过 提交于 2019-12-18 10:15:51
问题 I have been encountering problems like this on the current bootstrap 3 for a while now. I have managed to fix them in the past in one way or another but have no clue of how to fix it this time. I need to create two columns out of one ul by alternating a pull-left & pull-right on list items. What am I doing wrong? http://bootply.com/92446 回答1: You should try using the Grid Template. Here's what I've used for a two Column Layout of a <ul> <ul class="list-group row"> <li class="list-group-item

Block Formatting Contexts, Collapsing Margins and Floating Containers

由 折月煮酒 提交于 2019-12-18 09:23:43
问题 In order to understand what does a block formatting context do, I'm trying to find out what's going on when a BFC is not created. I took the following demo from Everything you Know about Clearfix is Wrong: .wrapper { width: 740px; background: #cccccc; } .leftSidebar { float: left; width: 200px; } .rightSidebar { float: right; width: 200px; } .mainContent { padding-right: 200px; padding-left: 200px; } .floatMe { float: left; background: teal; color: #fff; } <div class="wrapper"> <div class=

CSS two columns with known children width

由 …衆ロ難τιáo~ 提交于 2019-12-18 09:07:21
问题 I creating some code for showing box with diffrent heights (height will be from images inside). In this example works perfectly: http://jsfiddle.net/GSnfG/ ...but when i edit some height (in future - height of image), here: box 3 set to height 100px, the results doesn't work good. How prepare CSS code for creating something like two columns? I cannot use tables, also i don't want use jquery or other js It is possible? 回答1: No, it's not possible to handle this in the general case without

setting the float value from Javascript

由 半腔热情 提交于 2019-12-18 08:30:46
问题 I'm having trouble setting something to float right in JS. My code is as follows: var closebutton = document.createElement('div'); closebutton.style.styleFloat = "right"; alert(closebutton.style.styleFloat); closebutton.style.background = "#f00"; closebutton.innerHTML = '<a href="">✖</a>'; titlebar.appendChild(closebutton); The background of the element is indeed red, and when loaded the page alerts "right". Yet the div is not floated right. Firebug shows no trace of the float. There are no
订阅 css-float