CODEWITHSUNDEEP
htmlcss
Leon Gaban
Leon Gaban

Reputation: 39044

How to keep floated width of divs to stay exact instead of 100%?

http://codepen.io/leongaban/pen/qEzaNr

I have 2 columns, the first column on top section.tags-panel Is the column I'm trying to fix. I don't want the tag's to float like that until something else happens.

However I also need the default column width to be 240px. In order for me to create that pill button style feel, I had to put in float:left.

^ Thus this creates a problem where I have the pill tags looking correct, but floating wrapping when they should be lined up in a single column.

The column below section.tags-panel2 is the look I'm trying to achieve, however I'm cheating because I'm shrinking the width of the panel. The text in the tag pills should never wordwrap too.

enter image description here

How would you achieve this without it looking like:
enter image description here

CSS:

 section.tags-panel {
  width: 240px;
  height: 100%;
  background: #f7f7f7;
  border: 1px solid #ccc;
  overflow: auto;
}

section.tags-panel li { margin-right: 10px; }

.tag {
  overflow: hidden;
  float: left;
  position: relative;
  margin: 0 10px 10px 0;
  padding: 5px 10px;
  width: auto;
  border: 1px solid gray;
  background: #ccc;
}

Upvotes: 0

Views: 27

Answers (1)

AboutTime
AboutTime

Reputation: 317

Perhaps you could add 

clear: both;

to the tags? This should separate them and keep them in a vertical line as no floating elements are allowed on the left or the right side of the div you specify to have the clear attached to.

Upvotes: 2

Related Questions