CODEWITHSUNDEEP
csshtml
user1640722
user1640722

Reputation: 79

Prevent <div> taking new line; <span> not working

I am coding a page with a banner at the top which should contain a series of buttons. The following code works in all but the buttons are taking a new line when they should appear side by side. I know that div automatically takes a new line and that I should use span, but when I do it doesn't stretch the banner to fit the button like it does with a div. I have tried using several variations of float but to no avail.

<style type="text/css" media=screen>

body{
    margin: 0px;
    padding: 0px;
    color: #000;
    font-family: helvetica, times;
    font-size: 14px;
}

#wrapper{
  position: absolute;
  height: 100%;
  width: 100%;
  text-align:center;
}

#banner{
  background: url('images/banner_background.png');
  position: relative;
  margin: 0;
  width: 100%;
  color: #FFFFFF;
  z-index: 3;
}

#banner #button {
  padding:10px;
  margin:auto;
  position: relative;
  background: url('images/button.png');
  height: 100%;
  z-index: 4;
  width:100px;
}

</style>
</head>

<body>


<div id="wrapper">
  <div id="banner">

    <div id="button">
      dfsdfsfdsdfs
    </div>

    <div id="button">
      sddfdfdsf
    </div>

  </div>
</div>

Upvotes: 1

Views: 9740

Answers (3)

MildlySerious
MildlySerious

Reputation: 9170

To have the padding still work on an inline element like a span, you would have to set it to display: inline-block - it will still be in the text flow, unlike block elements, but accept width/height, padding and margin the same way an image does. Images are inline-blocks by default.

CSS:

#banner .button {
  display: inline-block;
  padding:10px;
  margin:auto;
  position: relative;
  background: url('images/button.png');
  height: 100%;
  z-index: 4;
  width:100px;
}

HTML:

<span class="button">
  sddfdfdsf
</span>
<span class="button">
  sddfdfdsf
</span>

Important: IDs are unique to a single element. If you have multiple buttons, use classes. I adjusted that as well.

Upvotes: 5

Zoltan Toth
Zoltan Toth

Reputation: 47667

Make your <div>-s inline-block - DEMO

Also ID-s should be unique.

And if you need buttons, then you have to use the <button> tag - it just makes more semantic sense. And it can be styled anything you want - DEMO

Upvotes: 1

Ovilia
Ovilia

Reputation: 7256

You should use display: inline for a div rather than using a span.

div set the display to be block by default, while span to be inline. You can't set padding or margin values to span because it is designed to be used in a lighter way (e.g., underline or italic for some words). So it's better to use div if you can do so and set attributes like display: inline to meet with the special needs.

Upvotes: -1

Related Questions