CODEWITHSUNDEEP
csshtml
user3547286
user3547286

Reputation: 15

Position divs in columns?

I have 2 divs I want side by side that together equal a width of 500px. How should I go about doing this? I was thinking maybe using a <span> for this.I don't know where to begin. Thanks

<span style="float: right; width:250px; margin-right: 550px;">
  <h3>NEWSLETTER</h3>
  <hr width="100" id="style" />
  <br />
  <form name="ccoptin" target="_blank" method="post">
    <font size="+1" face="LeagueGothic">Email:</font>
    <input name="emailBox" type="text" class="textField" placeholder="Not Available Yet" size="25" />
    <input type="button" class="submitBtn" value="Submit" disabled />
    <br />
    <center>
      <em>Occasional Discounts!</em>
    </center>
  </form>
</span>

<span style="float: left; width: 350px; margin-left: 550px;">
  <h3>OTHER INFO</h3>
  <hr width="100" id="style" />
  <br />

Upvotes: 0

Views: 1775

Answers (3)

Jyoti
Jyoti

Reputation: 11

HTML:

<div id="main-div">
    <div class="divone">
          <h3 style>NEWSLETTER</h3><hr/>          
          <form class="form">
          Email: 
          <input type="text" name="emailBox" class="textField" placeholder="Not Available Yet">
          <input type="submit" value="Submit" class="submit-btn">
          </form><br />

    </div>

    <div class="divtwo">
         <h3 style>OTHER INFO</h3><hr/>
    </div>
    <div style="clear:both"></div>
          <center>
          <em>Occasional Discounts!</em>
          </center>
</div>

CSS:

#main-div{
    width:500px;
    margin:0 auto;
}
.divone,.divtwo{
    width:250px;
    float:left;
}
h3{
    margin:0;
    padding:0;
}
hr{
    margin:0;
    padding:0;
    width: 54%;
}
.form{
padding-top: 10px;
}
.textField{

}
.submit-btn{
    float: left;
    margin-top:10px;
}

Hope it will help you.

Upvotes: 1

JCBiggar
JCBiggar

Reputation: 2497

you can use span blocks to do this. I would recommend divs.. But if you must use a span. add to the style display:block;

Here is a DEMO: http://jsfiddle.net/tL7Sp/

<div style="width:500px;">
<span style="float: left; width:49%;display:block;"> 
<h3>NEWSLETTER</h3>
      <hr width="100" id="style" />
      <br />
      <form name="ccoptin" target="_blank" method="post">
        <font size="+1" face="LeagueGothic">Email:</font>
        <input name="emailBox" type="text" class="textField" placeholder="Not Available Yet" size="25" />
        <input type="button" class="submitBtn" value="Submit" disabled />
        <br />
        <center>
          <em>Occasional Discounts!</em>
        </center>
      </form>
    </span>

<span style="float: right; width: 49%; display:block;">
  <h3>OTHER INFO</h3>
  <hr width="100" id="style" />
  <br />
 </div>

Basically to add a div side by side in a width of 500px you would do something like this:

HTML

<div class="maindiv">
   <div class="divone"></div>
   <div class="divtwo"></div>
</div>

CSS

.maindiv {
   width:500px;
}
.divone, .divtwo {
   width:49%; 
   float:left;
}

Upvotes: 1

Josh Rutherford
Josh Rutherford

Reputation: 2723

You need to start by removing the margin on each span. Also try changing them both to float the same direction. For example:

span {
    float: left;
    width: 250px;
}

span:nth-of-type(2) {
    float: left;
    width: 350px;
}

See this codepen

Upvotes: 0

Related Questions