css-float

Full width input in a div

由 戏子无情 提交于 2019-12-12 17:06:07
问题 Is it possible, without width: calc(...) nor flex (for legacy support) to have the input #what to use full width of its parent #b ? Note: Run the code snippet in full-screen and re-dimension the browser width to see the media query in action. * { padding: 0; margin: 0; } #a { float: left; background-color: red; width: 150px; } #b { background-color: blue; } #c { float: right; width: 40%; background-color: yellow; } #icon { background-color: black; width: 20px; display: inline-block; } #what {

CSS - How to make a relative element follow me up and down but not left and right?

由 萝らか妹 提交于 2019-12-12 16:45:59
问题 I have a parent div with a fixed position and inside of that div I have the main div with a relative position. While I scroll the bar up and down it follows me (this I want) but I don't want it to follow me when I scroll the bar left to right (or right to left). HTML: <div id="wrapper"> <div id="icons"> icons </div> </div CSS: #wrapper { position: fixed; z-index: 1000; top: 155px; } #icons { width: 42px; position: relative; left: -67px; } Thank you!! 回答1: You basically have to changed the

Place 'floating' contents at the bottom right of a paragraph of text

由 為{幸葍}努か 提交于 2019-12-12 15:45:29
问题 Here is the code: http://jsfiddle.net/ym2GQ/ p { background: lightblue; } .end { background: orange; float: right; display: inline; } <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing orci at tortor bibendum suscipit et eu eros. Nunc congue, ante nec egestas fringilla, ipsum est porttitor leo, tempus lacinia augue erat posuere elit. </p> <div class="end">$$</div> I want the floating $$ to be within the paragraph before it. It should align with the lasts line in the

Centering multiline floated elements

由 家住魔仙堡 提交于 2019-12-12 13:38:05
问题 I've been trying/searching for a while, but I can't make it work. <div class="wrapper"> <div class="project-container"> <ul> <li><div class="project-box"></div></li> <li><div class="project-box"></div></li> <li><div class="project-box"></div></li> </ul> </div> </div> I managed to center floated elements (like in here http://jsfiddle.net/z7pqP/2/) following this explanation (http://solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css). However, if the floated

jQuery-UI Tabs having problems with css float

由 跟風遠走 提交于 2019-12-12 11:47:45
问题 I'am having a problem with jQueryUi Tabs. I want to have a navigation bar at the left side of my tabs view, but the layout is not working. I think it is a bug, and I will report it to jQuery, but first I want to see if you can confirm this to be a bug, or am I doing something wrong? Preview my example at [ http://public.virtualmischa.de/bugs/jqueryui-tabslayout.html ]. First you see the non-working tabs example and below the working standard floating div example. <!DOCTYPE html> <html> <head>

clear:both won't work

由 徘徊边缘 提交于 2019-12-12 10:58:58
问题 Below is a menu inside a header. The ul and li elements are floating and are now floating underneath the header, which I've tried to prevent with clear:both. However, that doesn't seem to work so I wonder... what can be wrong? html: <header> <ul> <li><a href='#'>Item 1</a></li> <li><a href='#'>Item 2</a></li> <li><a href='#'>Item 3</a></li> <li><a href='#'>Item 4</a></li> </ul> <div class='clear'/> </header> css: header { background: #888; height: 20px; padding: 10px; } ul{ margin: 18px 0;

How does the margin work?

由 倾然丶 夕夏残阳落幕 提交于 2019-12-12 10:29:00
问题 I have provided below marginfix which is a block level element and one and two are also block level, but these are floated. That is the reason why they are on same line of layout, but marginfix is not floated either, and block level element should go below the element as the following +--------------------+ +--------------------+ | | | | +--------------------+ +--------------------+ +--------------------------+ | | +--------------------------+ But it works like this +--------------------+ +--

CSS center vertically in 2 floated divs

由 北慕城南 提交于 2019-12-12 10:13:39
问题 I have a div with 2 floated divs. On the left 3 buttons and on the right links in a paragraph, single line. When the links on the right become to long (or I decide on more bottons) the paragraph goes multiline and I would like my buttons to center vertically. In my example the bold name "Joe Smith" works fine, but if becomes "Joe Smith Brown Jones" I need my buttons to center. See an example here CSS: body { color: #CCCCCC; font-family: 'Lucida Grande', 'Trebuchet MS'; font-size: 100%; } a, a

How to make the float left and float right on the same line?

由 强颜欢笑 提交于 2019-12-12 08:29:49
问题 The Problem : **The left part** (#nav ul li) which float: left and **the right part** (#nav .search) which float: right **are not in a line**. it should be like this: but mine: The HTML: <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> <div class="search"> <input type="text" name="search" id="search" value="search"> </div> The CSS: #nav ul li{ float: left; list-style: none; margin: 0 20px;

How do I get around the IE CSS percentage rounding problem?

由 纵然是瞬间 提交于 2019-12-12 08:07:27
问题 I'm trying to create a dynamic site where I have three floating boxes next to eachother. They are 33.33% in width each. The container div around them is 75% in width. I've found an article about the problem here: CSS: Jumping columns I've also found an example of the same problem here: Jumping columns example Drag the window size to see the jumping in IE7 or earlier. Anyone knows if it's possible to get around this? (without Javascript) 回答1: I use two different solutions depending on the
订阅 css-float