CSS Floats

Question

I am working on a test project after completing the CSS Basics Course

I have three 3 Div blocks that I wish to place adjacent to each other I applied float to position 2 of the Div blocks on the left and right. How do I place a Div block in the center?

Answer 1 · 2017-11-23T14:15:23Z

November 23, 2017 2:15pm

I think to control the placement of a particular div you'd be better off using Grids or flexbox.

Floats affect the normal flow of elements but aren't really specific. The best thing you could do with floats is simply float the elements, then simply switch the content in your HTML.

Mind you, with 3 elements if you play around you can affect the position of eleents in a row

div#1 {
    display: block;
    width: 200px;
    height: 200px;
    float: left;
}

div#2 {
    display: block;
    width: 200px;
    height: 200px;
    float: right;
}

div#3 {
    display: block;
    width: 200px;
    height: 200px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Floats</title>
</head>
<body>

  <div id = "one">1</div>

  <div id = "two">2</div>

  <div id = "three">3</div>

</body>
</html>

Answer 2 · 2017-11-24T05:15:03Z

November 24, 2017 5:15am

Thanks, I have used the flexbox instead and it works perfectly

Welcome to the Treehouse Community

Looking to learn something new?

Sunil Padmanabhan

Sunil Padmanabhan

CSS Floats

2 Answers

Jonathan Grieve

Jonathan Grieve

Sunil Padmanabhan

Sunil Padmanabhan