Paragraphs that seem to float effortlessly on the

Question

Paragraphs that seem to float effortlessly on the

My div has a specific size and contains an image along with two paragraphs.

All elements are set to float left.

div {
  width: 400px;
  height: 400px;
}
img {
  float: left;
  width: 100px;
  height: 100px;
}
.one {
  float: left;
}
.two {
  float: left;
}

<div>
  <img src="http://img.timeinc.net/time/daily/2010/1001/360_br10q_0208.jpg" alt="">
  <p class="one">one</p>
  <p class="two">two</p>
</div>

Demo

I'm trying to have the paragraphs stacked on top of each other while still maintaining the left alignment. Is this possible? If so, how can I achieve it?

css

Answer 1

Answer №1

To achieve a layout where images and paragraphs stack one below the other, you can remove the CSS property float:left; from the classes .one, .two, and img. Since DIV tags are block elements, they naturally flow down the page without the need for floating which would display them side by side.

Alternatively,

If the intention is to structure the code as shown below, you can place the elements inside a div and remove the float property. By nesting them within a div, they will adhere to the natural block flow with display:block;.

div{
  width: 400px;
  height: 400px;
}
img{
  float:left;
  width: 100px;
  height: 100px;
}
.para{

}
.one{
}
.two{
}

<div>
<img src="http://img.timeinc.net/time/daily/2010/1001/360_br10q_0208.jpg" alt="">
<div class="para">


  <p class="one">one</p>
  <p class="two">two</p>
  </div>d
</div>

Answer 2

To achieve a layout where images and paragraphs stack one below the other, you can remove the CSS property float:left; from the classes .one, .two, and img. Since DIV tags are block elements, they naturally flow down the page without the need for floating which would display them side by side.

Alternatively,

If the intention is to structure the code as shown below, you can place the elements inside a div and remove the float property. By nesting them within a div, they will adhere to the natural block flow with display:block;.

div{
  width: 400px;
  height: 400px;
}
img{
  float:left;
  width: 100px;
  height: 100px;
}
.para{

}
.one{
}
.two{
}

<div>
<img src="http://img.timeinc.net/time/daily/2010/1001/360_br10q_0208.jpg" alt="">
<div class="para">


  <p class="one">one</p>
  <p class="two">two</p>
  </div>d
</div>

Answer 3

Answer №2

Check out this example on jsFiddle

div {
  width: 115px;
  float: left;
}
img {
  width: 100px;
  height: 100px;
}

<div>
  <img src="http://img.timeinc.net/time/daily/2010/1001/360_br10q_0208.jpg" alt="">
</div>
<div>
  <p>one</p>
  <p>two</p>
</div>

To achieve the desired layout, you can float the two parent containers. However, floating the paragraphs is not necessary!

I hope this example provides you with some inspiration for your project.

Answer 4

Check out this example on jsFiddle

div {
  width: 115px;
  float: left;
}
img {
  width: 100px;
  height: 100px;
}

<div>
  <img src="http://img.timeinc.net/time/daily/2010/1001/360_br10q_0208.jpg" alt="">
</div>
<div>
  <p>one</p>
  <p>two</p>
</div>

To achieve the desired layout, you can float the two parent containers. However, floating the paragraphs is not necessary!

I hope this example provides you with some inspiration for your project.

Answer 5

Answer №3

Use the clear: left property for elements with classes .one and .two:

div {
  width: 400px;
  height: 400px;
}
img {
  float: left;
  width: 100px;
  height: 100px;
}
.one {
  float: left;
  clear: left;
}
.two {
  float: left;
  clear: left;
}

<div>
  <img src="http://img.timeinc.net/time/daily/2010/1001/360_br10q_0208.jpg" alt="">
  <p class="one">one</p>
  <p class="two">two</p>
</div>

Answer 6

Use the clear: left property for elements with classes .one and .two:

div {
  width: 400px;
  height: 400px;
}
img {
  float: left;
  width: 100px;
  height: 100px;
}
.one {
  float: left;
  clear: left;
}
.two {
  float: left;
  clear: left;
}

<div>
  <img src="http://img.timeinc.net/time/daily/2010/1001/360_br10q_0208.jpg" alt="">
  <p class="one">one</p>
  <p class="two">two</p>
</div>

Paragraphs that seem to float effortlessly on the

Answer №1

Answer №2

Answer №3

Similar questions

Creating an interactive TABLE with twitching animations in a straightforward HTML and JavaScript project

What is the method for determining if a key on the keyboard is currently being pressed?

Using Bootstrap cdn in my React JS project caused conflicts with my custom CSS styles

How to make text transition between colors using CSS or jQuery

Having issues with jQuery not functioning on this specific web page across all browsers. The reason behind this puzzling dilemma remains elusive to me

Angular Bootstrap div width not displaying fully on iPad device

Is it feasible to combine border-radius with a gradient border-image?

No matter how much effort I put in, combining CSS with Bootstrap seems to be an impossible task

Styling Browser Alerts

Navigate a Bootstrap 4 drop-down menu by scrolling rather than having it drop down

Identical identification with matching attributes

Position the image to the left of the input box and align the text to the right

Can I substitute custom tags for the traditional <p> tag?

The Angular 5 animations enter transition successfully performs (void => state) but encounters issues with the leave transition (state => void)

What's causing the excessive amount of white space in my image?

`ASP.NET utilized for displaying several pictures on a website`

Header navigation issue: sub menu fails to display

Not all records are compatible with PHP Echo when placed within a paragraph

Adjust the background hue while scrolling (scrolling feature not functioning properly)

How to make Angular2 page fill the entire screen height