FAQ Database Discussion Community


floating an element makes the animation smooth and reverse the direction?

css,animation,css-float,height
I am trying to create a simple animation where 3 bars go up and down at a certain time interval. I am making use of height and animation-delay to achieve the effect as you can see. What's surprising is that when I float the bars, the direction of the animation...

Float right only works after window resize

html,css,alignment,css-float,window-resize
It's just incomprehensible! I have a div in the right side (DIV1) and another div next to it on the left (DIV2) and I want to put some elements in DIV2 aligned right. Here's the image : Here's the HTML : <section id='main-container'> <aside id='main-side'> </aside> <nav id='main-nav'> hello </nav>...

Stop floating DIVs from overlapping

html,css,css-float
I am developing a pure CSS diagram type of graph. Here is a trimmed down version of it: jsfiddle. As you can see, some of the floating divs are overlapping each other. If you increase the height of the list items, it works fine: jsfiddle. The problem is that I...

Sidebar going outside of wrap? [closed]

css,text,css-float,wrap,sidebar
This is the code, you can see what is wrong easily. #wrap { text-align: center; height: auto; margin: 0 auto; width: 1024px; background: #CCC; } #sidebar { height: auto; width: 300px; padding: 20px; margin-top: 60px; padding-bottom: 100px; border: outset; float: right; overflow: auto; } #content { border: outset; overflow: auto;...

Building Grid with Flexbox - How to setup multiple Items / Divs beside and down each other?

css,html5,css3,css-float,flexbox
i want to build my Grid with Flexbox and get stucked a little bit. How can a set a Box and towards on right Side multiple Boxes with half the Size of Box 1. Box 2-5 should then float towards Box 1. See in Scribble what i mean and how...

Why is a trailing
tag in one floating div able to push down another floating div on my page?

html,css,html5,css-float
Currently the page is just two divs sitting side by side inside a containing section. I had two trailing <br> tags on qtr_calc, which were pushing down sem_calc. Shouldn't qtr_calc be able to have as many newlines at the bottom as I like without affecting sem_calc? If not, is there...

CSS Float fails for HTML5 Input Elements

css,html5,css-float
I'm running into an issue when using HTML5 form input types (number, date, email, etc) with the CSS float property. I'm trying to float these to the right, but they are not honoring that setting. Here's a snippit where I put the CSS inline during testing: <div class="center" style="width: 100%">...

Why are elements not lining up horizontally

html,css,responsive-design,css-float
I have a site that I'm trying to design and I have elements that need to line up horizontally, this isn't working correctly, though. These elements are in a parent wrapper div and they are floated left and right respectively. There is also an image div inside one of the...

CSS left-align a float but constrain by right margin

css,css-float
Is there a CSS way to have a an inline block be left aligned, yet when the container becomes to small be constrained by the right edge, and instead have what is at the left of the block be reduced, and honor text-ellipsis ? When the container is wide I...

How to shrink wrap floating content?

html,css,css-float
I have a problem concerning shrink wrapping a container div, if the content is floating. I want the container to be only as wide as the floating content of the container (shrink-wrapped). The container should be centered. Because of the context I cannot give the container an absolute width. HTML...

Align Left and Right floats to bottom of Parent div

html,css,css-float,vertical-alignment
I have an element in an HTML page with child elements <div id="parent"> <div class="child01"></div> <div class="child01"></div> <div class="child02"></div> </div> I have an example with current css at http://jsfiddle.net/exu76qnx/ and I would like to know how to have the child divs align to the bottom of the parent div (without...

div overflow-x child resizes with parent container width

html,css,html5,css3,css-float
I have a 1100px-width div general container which I'd call (A) that resizes to 925px in my aplication. In addition, I have a div which has to more divs inside: one has a static width (200px) which I'd call (B) and the other doesn't but has an horizontal scrollbar which...

Float bug in chrome and Safari

css,google-chrome,safari,css-float
I'm getting a really strange bug in chrome and Safari only. I have a section with 3 divs inside. I want them to be put side by side, so I put a float left on the first one, a display inline-block on the middle one and a float right on...

vertical aligning two pull-right elements of different heights (Bootstrap)

html,css,twitter-bootstrap,css-float,vertical-alignment
I have two links (one text and one image) that I'm trying to pull-right and have the bottom of each vertically-align. But right now, it looks like this: (vertically aligned with each others' tops) Relevant HTML: <div class="col-md-7"> <div class="thumbnail"> <div class="caption clearfix"> <h2>Heading</h2> <p class="thin">Donut jelly beans muffin cupcake....

How do I get the divs to float next to, and below each other

html,css,alignment,css-float,positioning
I have a lot of divs with text in it, and I want them to nicely align next to each other and below each other. (I've read somehwere that I should make a parent div for these, and give the parent a relative position and the child a absolute position,...

CSS: Clear:left/right/both; VS Float: none;

css,css-float
I checked several questions on the matter both on the site and off but never have seem to have gotten a clear definition. It seems through experimentation that float: none; removes the element from the float layout position altogether and places the element back into regular document flow. clear: left/right/both;...

Explanation on CSS float overflow property

css,css-float
I am a newbie to CSS. I started exploring CSS float property. I have two <div> elements inside a container. The two divs have equal width and height. <div class="container"> <div class="one"> </div> <div class="two"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean...

Divs 'left / center / right' - how to perfectly center without 'width'?

css,css-float,center
This question is based on this answer: http://stackoverflow.com/a/23876839/994141 I read many threads on this subject, and it seemed to me the best answer because I would like to avoid setting a width. But the content at the center isn't well centered but based on the content on the left and...

css : Scrolling issue

html,css,css-float
I have 3 seperate portion in page. Each should scroll individually. And if we scroll entire page every div should scroll. How to achieve that. Following is fiddle for that http://jsfiddle.net/qLonzsvj/ html{ overflow-x:hidden; } .left-column { float:left; width:30%; } .right-column { float:right; width:30%; } .center-column { margin:auto; width:30%; } ...

Two Elements Refuse to Float Next to the Third

html,css,css-float,figure
I've been trying to resolve what should be a simple float/ inline-block CSS issue for a few days now, to the point where I've personified the elements as jerks. The conundrum is as follows: I've put 3 shortcodes all within a center-aligned <p> tag on my site. They are as...

CSS Positioning: wrapping text inside a modal

javascript,html,css,css-float,css-position
A relatively (I hope) simple question about CSS that I'm clearly just not getting. I have a modal on my page with the following style definition: .modal { position: fixed; width: 86% !important; left: 7% !important; height: 86% !important; top: 3% !important; background-color: #ffffff; border-radius: 5px; text-align: left; margin: 10px;...

CSS placing div on top of image

html,css,css-float
I am trying to move a select over my "header" image. The problem is that when I float:left it obviously just sits right underneath the image. I have tried using margin and padding and neither seem to be helping me in this situation. What am I doing wrong? The correct...

Gallery of divs with float-left

javascript,html,css,css-float,gallery
In my case I have a popup "window" with a title and a close button which is controlled with some script. What I want to do is to put gallery of divs with left-float so when the screen resizes they will stacked accordingly (eg. in very small screens they will...

CSS/HTML : float left not working when I zoom out the browser

html,css,css-float,border
I have a simple HTML like below : <div id="main_container"> <div class="floated_box">box 1</div> <div class="floated_box">box 2</div> <div class="floated_box">box 3</div> <div class="floated_box">box 4</div> <div class="floated_box">box 5</div> <div style="clear: both;"></div> </div> and the following css for my html elements : #main_container { width: 400px; margin: 20px auto; border: 2px solid #cccccc; padding:...

Inline block challenges and suggestions for the layout

css,layout,css-float,navbar
I keep reading articles that floats are outdated and that using inline-block solves problems such as having to use clearfix and a few more. These articles go on to justify inline-block by showing the same example: three squares that are aligned middle. In trying to use inline-block to create a...

Any way to get to float for a responsive table layout?

html,css,responsive-design,css-float
I was curious if there was any way to get cell 4 to float next to cell 3? I do not want to consider non-tabled solutions(please don't suggest, as I know how to do them). I am just curious if the requested can be done verbatim. Thanks to any HTML/CSS...

Why the text or images are not placed behind a floating element?

css,css-float,floating
Why the text or images are not placed behind a floating element? On this link:http://codepen.io/anon/pen/LVWmvp, you can see the example. The "blue" div is placed behind the "transp" div. But the thing is that the text (or an image) is not placed behind the "transp" div also. And please notice...

Building Grid with Flexbox - Items in second row only on right Side [closed]

css,html5,css3,css-float,flexbox
i want to build my Grid with Flexbox and get stucked a little bit. It is a 4-Column Grid. In the Second Row i only want to place 2 Items on the right Side. Just see my Scribble. ...

Content appearing outside of hamburger navigation

jquery,html,css,html5,css-float
I have a hamburger navigation, I know the code for the menu itself work as I copied out of the other pages on the same site. On this particular page when I click the button the drop down appears outside of the space it should appear, however when I hover...

Unable to clear floats in responsive layout, lengthy content box pushes others down

html,css,layout,responsive-design,css-float
Floated list items, where if one item is longer than the rest it will push other list items down across the entire UL. I've tried unsuccessful combinations of vertical-align:top, float:top, clear:none, and overflow:hidden. This is part of a responsive content display, the code where the problem occurs can be found...

CSS two columns without specific widths

css,layout,css-float
I am trying to port a simple two column table to use div and float. I need the feature of a table that is able to scale the width of all columns to the largest content (without taking the whole browser width), but would like the added feature of floats...

CSS: clear on inline elements

css,css-float
Check this JSFiddle: <IMG src="https://www.google.com.hk/images/srpr/logo11w.png" alt="This image will illustrate floats"> <span>The contents of floats are </span> The image is floated, and the span has clear:both. However, if the span has display value inline or inline-block, the clearance is not created. Only if it is block, the clearance is created. I...

CSS float not working properly

css,html5,css-float
I'm trying to get a really basic layout using only CSS and divs. What I would like to do is have 3 big divs on the same row and a small div below the first div of the first div in the row. Since I'm trying to set for all...

Weird
Behavior

html,css,css-float
I am trying to create a view where I have one div broken into two columns that then displays a set of < label and value > together. Underneath that two column layout, there should be a dividing line, and then a single column that spans the width of both...

What html elements can be floated around

html,css,browser,css-float
I tried have some pre formated user input placed in a <pre> tag to retain its formatting such as line breaks, white space ect. However I also needed this text to be flowing around a div...you know floating around it. However it seems only <p> elements adhere to this behaviour...

How to align multiple floating elements

html,css,css-float
I'd like to align two elements (A & C) properly: <div> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div> </div> My stylesheet: .a, .b { float: left; clear: left; width: 40%; } .c, .d { float: right; clear: right; width: 40%; } However, this results in: I'd like to align...

Issue Getting Div to Hug up close to another

html,css,css3,css-float
I have 6 Divs within a container Div. These divs have to be aligned a certain way for a clients needs. I've taken the basic layout for the customer website I'm working on and created a sample to be posted here. I have a regular CSS file and a mobile...

Why does the second body div not line up with the first body div?

html,css,css-float
Why is the rowDiv text not left aligned with the ColumnDiv text and how do I fix it? <div id="d1"> <div id="d2" style="float: left;"> <div id="d3" style="font-weight: bold; height: 20px; overflow: hidden;"> ColumnDiv </div> </div> test text </div> <div id="d4" style="overflow: hidden;">rowDiv</div> JSFiddle This is a simplified version of...

Float right and left of main content at the same time

html,css,css-float
I need to add two sidebars, one on each side of the main content. Because of the unstable content (rss feeds), I'd rather have both sidebars load after the main content in the document, but still take their respective places. Is there a way to do this with just floats,...

Very strange overflow+float behavior

css,css-float
HTML: <div id="float_left"> DIV1 </div> <div id="without_overflow"> DIV2 </div> css: #float_left{ float: left; width:200px; background-color: red; } #without_overflow{ width:400px; height:40px; background-color:green; } http://jsfiddle.net/kgypo14y/1 The result of the above code is what I expected. However, if I added overflow:auto or overflow:hidden to the second div the result is totally unexpected to...

CSS Float Logic

html,css,css-float
A fiddle: http://jsfiddle.net/8wffnn92/ I have created 25 boxes of random width and height, where width = height (as shown) $(".content").append("<div id='"+count + "_" + iter+"' class='box'><p>"+count + "_" + iter+"</p></div>"); $(".content div:last").width(Math.round((Math.random() * 100) + 50)); $(".content div:last").height($(".content div:last").width()); Each div has the following css: .box{ background:#FF0004; margin: 10px; float:left;...

Floating divs not wrapping properly

html,css,css-float
i have a bunch of divs set to float. For some reason, when it gets to 3 rows of floating divs, the divs start acting funny. Here's the jsfiddle: http://jsfiddle.net/grem28/nq1q55bz It seems to have something to do with the names i have set. Here's the code: <div class="pdfs"> <a href="#"...

How do I align 2 divs (each has its own padding) next to each other?

html,css,alignment,css-float
With the padding commented out as shown, the website works like I'd expect (2 div columns next to each other. However, when I add padding, the #right div shifts downwards. How would I make it work as intended with padding? HTML: Two divs contained directly in body CSS: #left {...

CSS nav bar hiding my content

html,css,css3,css-float
I am having trouble with my nav bar being over my content http://jsbin.com/jusejozene/1/edit?output I am not sure what I could do so please help When the nav bar is in responsive/mobile mode it works but when its in desktop mode it doesn't :(...

change width of vertical menu item that is floated right

css,css-float,floating,css-menu
#mainMenu { float: right; margin-top: 70px; padding: 0; list-style: none; // position: relative; } #mainMenu li { box-sizing: border-box; width: 250px; height: 70px; background-color: rgba(0, 168, 107, 1); border: rgba(76, 76, 76, 0.2) 1px solid; } #mainMenu li:hover { background-color: rgb(2, 100, 59); margin-right: 50px; } <ul id="mainMenu"> <li...

Where is this css ' float: left ' coming from — Jekyll

css,sass,css-float,jekyll
I'm using the Jekyll CMS The header has a basic structure <div class="top"> </div> <div class="header-wrapper"> <div class="header-left"><img src="/assets/images/lawmen1.png" alt="Law and Lawson Attorney at Law Lawyers City State"></div> <div class="header-right"> <ul> <li><i class="fa fa-location-arrow fa-2x"></i>250 W. Main Street Suite 2510<br>City, State 90210</li> <li><i class="fa fa-mobile fa-2x"></i>(555) 555-555</li> <li><i...

Fill empty space

html,css,css-float,fill,autofill
Hi guys this is my problem (please visit the image link): http://dominioestudio.com/example.png Im making a website and i cant figure it out how to fill the red space with the element below (the one into the cian rectangle). This is the code from those elements (the gray contents) .post {...

Float: Right Not Working

css,css-float
I'm trying to get three paragraphs of text to float to the right of an image. However, the float: right; isn't working. Instead, the text and background-color (that I added for testing) is placed above the image, covering it completely. What the heck am I missing? <div style="width: 100%; max-width:...

Google Chrome, float, and media queries

css,google-chrome,css-float,media-queries
I'm having a problem where Google Chrome sometimes incorrectly renders a floated element. More specifically, the markup looks like this: <h1> Headline <small>Sub-heading</small> </h1> This is styled using this simple CSS: h1 small { display: block; } @media (min-width: 750px) { h1 small { float: right; } } (here is...

CSS background is less than div hight

html,css,css-float,wrapping
Help me please, I can't understand result of my simply code: <div id="wrapper-top"> <div class="wrapper"> <div id="logo">logo</div> <div id="menu">menu</div> <div id="content"> <div class="block-1-1">text</div> <div class="block-3-1">text</div> <div class="block-3-2">text</div> <div class="block-3-3">text</div> </div> </div> </div> and css file: #wrapper-top { width: 100%; background-color: gray; } .wrapper { margin: 0 150px 0 150px; }...

Move DIV to Right form Bottom with relative to Top DIV

css,css-float
I have following Scenario http://jsfiddle.net/EYGhf/63/ <div class="wrapper"> <div id="first_div">first div</div> <div id="second_div">second div</div> <div id="third_div">third div</div> </div> I want third div to be next to first div, first and second would be in same column, if right space is not available, i.e. on mobile, third div would float to bottom....

float:left paragraph followed by float:none paragraph

html,css,css-float
I am trying to understand the float behavior, so I wrote the simple two paragraphs below. The second paragraph which is float:none, appears to "contain/surround" the first paragraph which is float:left. Someone please help me understand why is that. <p style="float:left; border:red solid 1px;"> first paragraph. first paragraph. first paragraph....

Apply common scroll to all “float:right” elements

html,css,html5,css3,css-float
So I have this display, made for a portait-orientation view: <div id="wrapper"> <div class="to_right_on_landscape"></div> <div class="to_left_on_landscape"></div> <div class="to_right_on_landscape"></div> </div> In portrait orientation, each div displays full-width, on top of each other. That is good. Now, when orientation is landscape, I want to throw that middle div to the left and...

float depending on number of lines

css3,css-float
I'm trying to achieve the following: I have 2 elements. If the screen is large enough, I want the second to float on the right: --------el1-------- --------el2--------| but not if the screen is too small: --------el1-------- | --------el2-------- | I've tried to use .container::first-line .el2{float: right;} with some html like...

In a two-column border-box with unspecified height and a clear div, what causes the height difference?

html,css,css3,css-float
I have created a JSFiddle illustrating the example, and will include the HTML/CSS at the end of this post. My understanding of the border-box styling option is that it causes inclusion of borders and padding in specified widths and heights. In the example I am using min-height, and so the...

Is there a CSS animation for a floating div that wraps on window resize?

css,css3,css-float,css-animations
If I have a series of divs all with float: left and I resize the browser so they wrap, can I animate their transition to their new location using only CSS animations (no JavaScript)?

How to make a div width flexible?

html,css-float
I have 2 div's sitting side by side.I will populate the two div's with text from database.Now, the div on L.H.S may or may not have text inside it.On the other hand the div on R.H.S. will always have text inside it.My problem is ; how do i design the...

Trying to build a custom slider, but
for right button displays outside of
tag

html,css,html5,css3,css-float
I'm trying to do my own custom slider for a website, I know there are many jQuery plugins for this, but I wanted to make it as a fun project. The thing is the right button isn't working as I wish and keeps displaying outside of my <section id="slider"> tag...

Aligning elements horizontally in header

css,css-float
I've just made my first menu header using CSS. I am having trouble aligning them though- I want to align one menu to the right, and the other to the left. Below is an image on how I want it to look: Here is some of my CSS code: .main-navigation...

CSS ::after pseudo element clear not working

html,css,css-float,clear,pseudo-element
Here is a fiddle: http://jsfiddle.net/e4y05yyz/1/ Working on a responsive layout. I would expect that the :after pseudo element would clear both floats and the the element with class .masthead-middle would drop to the next line, but it does not. If I put a clear: both; on the masthead-middle element that...

Combine float and absolute position

javascript,html,css,css-float,absolute
I am creating a calendar where all the events are displayed in a single div. According to the top and height values, the event should be placed in a determinate place. Let me show you. In this image, both events at 6am are at the same vertical alignment. I can...

How to create 3-column layout (fixed, fixed, fluid) [closed]

html,css,html5,css-float,liquid-layout
I am trying to create a 3-column layout that works on most mobile browsers. Flex does not work unfortunately. There is a great help for liquid, fixed, fixed layout (http://www.pagecolumn.com/liquidfixed/3_col_liquid-fix-fix.htm), but I do need fixed, fixed, liquid. Could not get this done so far and hope for any help on...

why is margin not applying without overflow:auto

css,css-float
I am trying to create a view page with label and text next to each other. Now without mentioning overflow auto the margins don't get accounted. Why?? This is my css & html. .dl-horizontal { margin-bottom: 20px; /*overflow:auto*/ } .dl-horizontal dt { clear: left; float: left; font-weight: bold; line-height: 25px;...

CSS - How to set margin-left dynamically with a fixed value

html,css,css3,css-float
I want a div's margin left value = 50% of parent div - 300px. So, what I have done is- <img id="layer2" style=" display: block; margin-left: 50%-300px; width: 300px;" > But it is not working. I also have tried- margin-left: 300px-50%; It is also not working. Can anyone please help?...

vertical align middle divs with float right & left

html,css,css-float
I have a user name and photograph that appears side by side and middle aligned, as shown below. I am now trying to change the css so that the photo is dynamically floated to the left and the user name is dynamically floated to the right. I have tried adding...

floated element being pushed down by previous element

html,css,responsive-design,css-float
http://jsfiddle.net/4gw8wank/ I have 3 container as part of a responsive page. In the mobile view they must display in the order- blue, red, green, stacked on top of each other like so.. <div class="blue"></div> <div class="red"></div> <div class="green"></div> which is fine, but in a desktop experience, using the same markup,...

WP - Contact form 7 - Input & Btn next to each other

wordpress,css-float,contact-form-7
here my website I´m working on: http://www.whatsahoy.com/ My problem: I want the input field next to the button. If I add a float left, it goes next to each other but with a weird <br>. And then the whole thing is also on the left. I want it to be...

Stacking Font-Awesome Star Icons (fa-star & fa-star-half)

html,css,css-float,font-awesome,font-awesome-4.0.0
I want to stack the two Font Awesome icons fa-star and fa-star-half, but I am having alignment issues. See image below: Here is my HTML: <span class="fa-stack"> <i class="fa fa-fw fa-lg fa-star-half fa-stack-1x"></i> <i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i> </span> ...and my CSS: a-stack i.fa-star { color:transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color:...

Starting a css site but format issues [closed]

html,css,css-float,css-position,css-transforms
The link of the site is here progerdevs.co.nf just a test site. When I load the page on my android it is displayed horribly, everything is all over the place. Does anyone know what it is called so it changes when theres a different screen size? I still have a...

Why is the div floating all the way to the right when it is float :left?

html,css,css-float
I am trying to get the div to align under the 'featured' section on this page: http://paulsavagejr.com/home.html. Instead, the div is aligning with the right side of the screen even though it has float:left included in its code. I thought maybe if I defined height on a previous div it...

Center Right-Floated Div on Window Resize

html,css,responsive-design,css-float
I have 2 divs that I'm setting up to be next to each other in the desktop version of my site, and on the mobile / tablet version, I would like the right div to be on top and the left div to be underneath, with both of them centered...

Stick footer on bottom with a floating grid schema content

css,css-float,grid-layout
I have a website based on a grid system, so all columns are floated to the left. This means that the main .content div has no height, as all its containing divs are floating and out of the HTML flow, and so the body has neither height. I have searched...

How do I float a div to the right of a title div without affecting the content of the title?

html,css,css-float
I'd like to know how to get the following result: Green is a container div 700 pixels wide. Blue is a title area which fills the green container width-wise with some title text centred in the middle. Red needs to float on the right without affecting the flow of the...

Child div not inlining inside parent div

html,css,css-float,inline,division
I must be doing something stupid or looking over something obvious, because no matter what I do I cannot get these three divs inline inside this parent. .stats { display: inline-block; margin-right: 6px; float: right; padding: 0; font-family: "Roboto" sans-serif; color: black; } .separator { background: rgba(47, 187, 255, 0);...

Simple CSS Floating Extra Space

html,css,css-float
At this link: http://css.maxdesign.com.au/floatutorial/introduction18.htm If you go into the DOM manipulation and turn off the black border of .containingbox, you'll see that the <p> element goes right back to where it should be floated next to the square. I understand that because of the border of .containingbox the <p> element...

CSS float-left prevent words to go on new line

html,css,css-float,floating
I have the following code: html <div class="container"> <div class="float-left"> <a href="#"><img width="550" src="image.jpg" alt="" /></a> </div> <div class="float-left"> <h1 class="new">Some long text here that should word wrap</h1> </div> <div class="clear"></div> <div> css .container{ width:960px; } .float-left { float:left } .clear{ clear:both; } h1.new{ font-family: RockwellMT-Light; font-size: 28px; line-height: 31px;...

No right floating for small-state in Foundation-framework

css,css-float,zurb-foundation
I have a <p class="right"> in my Zurb Foundation-based layout. But I don't want it to float right on small screens. Is there a built-in solution in Foundation? Or do I have to create my own class for it? Thanks in advance!

Strange Google Chrome Float Bug - Fine in other browsers

css,google-chrome,css-float,html-email
I'm encountering a strange bug where I'm trying to float my table cells (that are block level and 100% width) and they end up side by side while the first cell behaves normally. You are specifically looking for the header. I'm using tables because this is an email. In other...

Targeting the last div before flexbox or float wraps the rest

html,css,css3,css-float,flexbox
I am wondering if there is a CSS selector that would auto-magically target the last div on a row created by either flexbox or floats. In our particular use, we have an image grid with different width images. In its full width, there are rows with 3 images (each 33%)...

Center a div with dynamic width in a parent where the width can be bigger than the parent

html,css3,css-float,css-position,margin
Okay I hope I can make clear what I need. I have 5 Divs: a wrapper, div 1, div 2, div 3 and div 4. HTML: <div id="main"> <div id="one">1</div> <div id="two">2 <div id="four">4</div> </div> <div id="three">3</div> </div> CSS: #main{ height:200px; border: 1px solid red; float:left; } #one{ min-width:100px; max-width:200px;...

stop div after the floating div from wrapping text

html,css,css-float
I have trouble with floats. see http://jsfiddle.net/hhbjf2wv/4/ <div> <div style="float:left; width:20px;"> <input type="checkbox"> </div> <div> Just some long long long text Just some long long long textJust some long long long textJust some long long long textJust some long long long text Just some long long long text Just some...

keeping image over everything in fixed position

html,css,css-float
I have to place an image in a fixed position and over all content (similar to z-index=100) What I want is when I add any content before the image, the image keeps its position and the content goes behind it. As is the image is a background image but in...