Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Floating with CSS - Is a width required?

Tags:

css

css-float

When I was learning CSS some time back I read that when you float elements that a width for each element was required. Is this true?

The reason I ask now is because I wanted to float varying width elements; but obviously this wasn't working as the longer elements would just wrap to the next line. I took out the width for the elements in the CSS & it displays how I want it to..... the elements just take up the space & if it's too long for the width of the container then it will just display on the next line.

like image 486
Brett Avatar asked Mar 03 '26 12:03

Brett


1 Answers

Width is not required. It depends entirely on what you're trying to accomplish.

When I float elements with a static width it's usually to create a column-like layout

.sidebar { float: left: width: 30%; }
.content { float: left: width: 70%; }

but for times when you want items to take up as little space as possible and wrap to the next line, width isn't necessary.

And, as always, when you float, make sure you clear:both or left or right

like image 159
hunter Avatar answered Mar 06 '26 02:03

hunter