CODEWITHSUNDEEP
htmlcss
Norse
Norse

Reputation: 5757

CSS Wrapping rows of <span>s issues

I have this data:

<div id="results">
  <span id="row">
    <span id="left">left column</span>
  <span id="middle">middle text</span>
  <span id="right">right stuff</span>
  </span>
</div>

I'm trying to emulate this:

Here is my CSS Code:

#results {
  width: 700px;
  margin: 0px auto;
  border: 1px solid black;
}

#row {
  width: 85%;
  margin: 0px auto;
  border: 2px solid green;
}

#left {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}

#middle {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}

#right {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}
<div id="results">
  <span id="row">
        <span id="left">left column</span>
  <span id="middle">middle text</span>
  <span id="right">right stuff</span>
  </span>
</div>

The problem is, that it turns out like this!

It looks fine except to the right of the right span block, that green chunk there is supposed to be the #row wrapper. Why isn't it wrapping like it should?

Upvotes: 2

Views: 816

Answers (4)

KARASZI Istv&#225;n
KARASZI Istv&#225;n

Reputation: 31467

You need to add overflow: auto to the #results and to the #row definition, and you also need to add display: block to #row (or just make it a block element for e.g. a <div/>) to make it work.

CSS:

#results    { width: 700px; margin: 0 auto; border: 1px solid black; overflow: auto; }
#row        { display: block; width: 85%; margin: 0 auto; border: 2px solid green; overflow: auto;  }
#left       { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }
#middle     { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }
#right      { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }​

See the working jsfiddle here.

But keep in mind that width (200px) + the border (2px) + margin (10px) = 212px, multiplying it by 3 = 636px, and 85% of 700px is 595px that's why it does not fit.

Upvotes: 1

Rajan Rawal
Rajan Rawal

Reputation: 6317

Perhaps this may help you

<html>
<head>
<style type='text/css'>
    #results    {width: 700px; margin: 0px auto; border: 1px solid black; min-height: 50px;}
    #row        {width: 92%; margin: 0px auto; border: 2px solid green; min-height: 30px;}
    #left       {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}
    #middle     {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}
    #right      {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}

</style>
</head>
<body>
<div id="results">
<div id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</div>
<div id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</div>
</div>
</body>
</html>

The Out put which i get it

enter image description here

Upvotes: 1

PeeHaa
PeeHaa

Reputation: 72652

Because the inner elements are using float you have to 'reset'. E.g. by using overflow: hidden; on the parent.

Also you are trying to set a width on an inline element (the span), which cannot be done. Change it to either block or inline-block.

Upvotes: 1

sandeep
sandeep

Reputation: 92803

Define display:block or display:inline-block to your #row span Because span is an inline element which didn't take width & height by default.

Check this http://jsfiddle.net/2xufx/

Upvotes: 4

Related Questions