CODEWITHSUNDEEP
csshtmlinline
James
James

Reputation: 1925

How do I make the divs inline?

I am using a wrapper but I am pretty confused. I want the two resultbox divs to be in line with the submit div.

Take a look here:

http://jsfiddle.net/QtVwr/

What am I doing wrong?

I'm not very familiar with CSS.

Upvotes: 2

Views: 6244

Answers (5)

pleerock
pleerock

Reputation: 18846

To make div inline you should use the following CSS style:

.mydiv{ display: inline; }

Note: Change width of your wrapper (make it smaller) and you will see the results

Upvotes: 2

Jared
Jared

Reputation: 12524

There are several issues with the code you have provided.

  • you have defined css rules for a class wrapper but use class wrapper1 in your html
  • class wrapper doesn't have enough width for both of the result boxes plus the submit
  • There are extra quotes on the second result box style="margin-left: 5px; margin-top: 3px;""
  • form tags are malformed and being intertwined with your div tags
  • form tags aren't closed
  • locationresult div tag isn't closed
  • floats need to be cleared

here is a fiddle

http://jsfiddle.net/e3dg6/

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34855

Part of the problem is that there are issues with your HTML. Here's a start:

  1. make sure all the divs are closed.
  2. remove the floats from your css
  3. add display:inline-block;
  4. remove the inline styles from your HTML.
  5. correct the .wrapper class to be .wrapper1 (matching the HTML)

So, this is more what you want, I assume:

.wrapper1 {
    height:70px;
    width: 800px;
    background: #ffffff;
    border: 1px solid grey;
    color: #BDBDBD;
}

.resultbox {
    width: 300px;
    background: #ffffff;
    color: #BDBDBD;
    display: inline-block;
}

.submit {
    height:15px;
    width: 32px;
    margin-top:10px;
    background: #ffffff;
    border: 1px solid;
    color: #BDBDBD;
    display: inline-block;

}

and the HTML

<div class="wrapper1">
    <div class="resultbox" style="" >
        <div class="locationresult" style=""  form action="weezyresults.php" method="post">
            <input type="text" name="search"  size="36" value="" style="" />
        </div>    
    </div>

    <div class="resultbox" style="" >
        <div class="locationresult" style=""  form action="weezyresults.php" method="post">
            <input type="text" name="search"  size="36" value="" style="" />
        </div>    
    </div>

    <div class="resultbox" style="width:35px;" >
       <div class="submit"></div>
    </div>    

</div>

Example: http://jsfiddle.net/QtVwr/2/

You will still need to fiddle with it. But this is a start.

Upvotes: 2

samn
samn

Reputation: 2807

Why do you have the submit div within a resultbox div? Why the margin-left:10px, only with the first div?

I'd do it like this:

<div id="wrapper">
<div class="resultbox"></div>
<div class="resultbox"></div>
<div id="submit"></div>
</div>

And set the width and height of the wrapper, and let the other divs float. It's just a longshot, not exactly sure what you're trying to accomplish. I just think your nesting is not okay.

Upvotes: 0

aziz punjani
aziz punjani

Reputation: 25776

The width of your results boxes combined exceeds the width of your wrapper. You need to either make the wrapper wider or reduce the width on the resultboxes.

Upvotes: 0

Related Questions