0

I'm trying to put the text on the left side and a button on the right side and have both elements be inside a box.

  • How do I move the button over to the right more and control the positioning.

Here's my jsfiddle: http://jsfiddle.net/3PTtv/46/

    <div id="wrapper-landing">
<div class="box-row">
    <div class="box-form-body">
            <h4>
                See What You're Missing<br>
Fill out our Form</h4>
    </div>
    <div class="box-form-button">
        <img src="http://www.ei.edu/wp-content/uploads/2013/03/button_submit.jpg" /></div>
    </div>
</div>

Here is my CSS:

#wrapper-landing {
width: 916px;
margin: 0 auto 50px auto;
padding: 0;
}

.box-form-body {
float: left;
display: block;
width: 65%;
padding: 0 0 0 2em;
}

h4 {
font-size: 1.05em;
margin: 0 0 2px 0;
font-family: "HelveticaNeueW01-75Bold",Helvetica,"Helvetica Neue",Arial,sans-serif;
font-weight: normal;
}

.box-form-button {
float: left;
display: block;
margin-top: 5px;
width: 25%;
min-width: 215px;
}

.box-row {
width:100%;
    padding:10px;
    border:1px solid #e2e3e4;
    margin:0px;
    overflow: hidden;
    background-color:#f66511;
}
Community
  • 1
  • 1
user3075987
  • 873
  • 2
  • 15
  • 32

3 Answers3

1

To do this, you need to remove the float: left from the .box-form-button element

.box-form-button {
    display: block;
    margin-top: 5px;
    width: 25%;
    min-width: 215px;
}

That will make it so the button appears in the box. Then you have to change the display: block on that same element to display: inline so that it displays in line with the other elements.

.box-form-button {
    display: inline;
    margin-top: 5px;
    width: 25%;
    min-width: 215px;
}

JSFiddle

Ceili
  • 1,308
  • 1
  • 11
  • 17
0

As you are floating both child elements within your box, the box doesn't know how tall the contents are. If you want to keep your floated elements you can apply what is called a "clearfix" to your parent element.

Try adding these styles:

.box-row:after {
    content: '';
    display: table;
    clear: both;
}

In action: http://jsfiddle.net/chicgeek/3PTtv/38/

About clearfix

There are a few different methods to apply a clearfix (above is my favourite). To understand more about clearfixes and alternative ways to achieve it, here's some reading:

Community
  • 1
  • 1
chicgeek
  • 486
  • 3
  • 16
0

Adding overflow: hidden; to the .box-row style will correct this. http://jsfiddle.net/3PTtv/40/

.box-row 
{
    width:100%;
    padding:10px;
    border:2px solid gray;
    margin:0px;
    overflow: hidden;
}
Howli
  • 12,291
  • 19
  • 47
  • 72