Apply 'float' to parent <div> tag

Posted on 2016-07-31
Last Modified: 2016-07-31

<div class="basicdiv3rows">
  <div class="row1">art</div>
  <div class="row2-horizontallinemain-artandculture"></div>
  <div class="row3">life</div>

Open in new window

Please let me know that apply 'float' to parent cause apply to children also?
LVL 17

Accepted Solution

bigeven2002 earned 500 total points
ID: 41736754

Yes, the parent element is inherited by the child element so the nested DIVs will also float right.  In the CSS, a clear float DIV should follow the closing tag of the parent DIV.

.basicdiv3rows {
.clearfloat {

Open in new window

<div class="basicdiv3rows">
  <div class="row1">art</div>
  <div class="row2-horizontallinemain-artandculture">culture</div>
  <div class="row3">life</div>
<!-- remove or comment out line below if you do not want a line break after the floated divs -->
<div class="clearfloat"></div>
Next line

Open in new window

Here is an example from the code above:

Author Comment

ID: 41736983

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 39
CSS issue 8 40
Width of Page is Affecting Side Menu 6 32
social media icons disappear on small screens 4 12
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question