Menu
How to set float right for every element inside div?
I want to give float to inside elements only not to parent DIV?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
div {border:2px solid red;height:50px}
a {border:2px solid blue;margin:10px}
</style>
</head>
<body>
<div>
<a>Hello from JS Bin</a>
<a>from JS Bin</a>
</div>
</body>
</html>
997
Approach: We can make a container and then set the display property to flex. It creates a Flexbox. Now we can apply flexbox properties to the items of the container. So, we will set justify-content property to space-between to create equal sized “div” elements.
Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.
Its most common use is to wrap text around images. However, you can use the float property to wrap any inline elements around a defined HTML element, including lists, paragraphs, divs, spans, tables, iframes, and blockquotes.
The clear property applies to floating and non-floating elements.
You can target all children of an element using the * selector, so in your example, you could add:
div * { float: right; }
Note that this would float all children and their children, so if you had nested content it's probably not what you want, in this case you probably want:
div > * { float: right; }
However, the > direct descendant selector isn't supported in older versions of IE (and possibly other browsers?).
144
Following on from Alconja below is a good way of getting round the descendant selector issue:
div *{ float: right; }
div * *{ float: none; }
This will float everything right, then the children of everything will be reset to none.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
