Home/ Questions/Q 9280691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T17:56:08+00:00

My problem is that for the div classes form-profile and form-profile-side , if I

  • 0

My problem is that for the div classes form-profile and form-profile-side, if I want 2 of those divs, they must be on the same line within the HTML:

<div class="span13">
  <form class="form-profile-side"></form><form class="form-profile"></form>
</div>

if I put the second class on a new line, it messes up the layout (this is what I’m trying to do):

<div class="span13">
  <form class="form-profile-side"></form>
  <form class="form-profile"></form>
</div>

CSS:

.form-profile-side {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  border-right: 0;
  -webkit-border-radius: 0px 0px 0px 0px;
  -moz-border-radius: 0px 0px 0px 0px;
  border-radius: 0x 0px 0px 0px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.form-profile {
  display: inline-block;
  width: 817px;
  padding: 15px 15px 15px;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  -webkit-border-radius: 0px 5px 5px 5px;
  -moz-border-radius: 0px 5px 5px 5px;
  border-radius: 0px 5px 5px 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

How do I make it so that I can create a new line in the HTML using the class, instead of having it all on one line?

JSFiddle: http://jsfiddle.net/VzTxM/4/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I believe the issue you’re having (if i understand the question right) is that the display:inline-block; is adding a lil spacer when the HTML is on two seperate lines – you can fix this by flaoting the elements instead?

    CSS 

    .form-profile-side,.form-profile {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    border: 1px solid #d6d6d6;
    background-color: #fff;
    float:left;
}
.form-profile-side {
  -webkit-border-radius: 0px 0px 0px 0px;
  -moz-border-radius: 0px 0px 0px 0px;
  border-radius: 0x 0px 0px 0px;
  vertical-align: top;
  border-right: 0;
  width: 120px;
}
.form-profile {
  -webkit-border-radius: 0px 5px 5px 5px;
  -moz-border-radius: 0px 5px 5px 5px;
  border-radius: 0px 5px 5px 5px;
  padding: 15px 15px 15px;
  width: 817px;
}

.clear {
    clear:both;
}

    HTML

    <div class="span13">
  <form class="form-profile-side"><br><br></form>
  <form class="form-profile"><br><br></form>
  <div class="clear"></div>
</div>
    • 0