CODEWITHSUNDEEP
csshtml
Infra Stank
Infra Stank

Reputation: 816

CSS problems with DIV placement

I've got a couple of DIV's within a containing DIV . I want them to sit next each other horizontally but no matter what I do they stay on the vertical.

code :

<style>

#entrycontainer {
    height:100px;
    width:500px;
}
#entry {
    height:100px;
    width:200px;
}
</style>

      <div id="entrycontainer" >

          <div id="entry" >
          <h1>PHP File Upload/Browser</h1>
          <img src="img/projectimg/fileupimg.png" />
          <p>PHP MySQL CSS</p>
          </div>

          <div id="entry"  >
          <h1>PHP File Upload/Browser</h1>
          <img src="img/projectimg/fileupimg.png" />
          <p>PHP MySQL CSS</p>
          </div>

    </div>

Upvotes: 1

Views: 176

Answers (5)

ptriek
ptriek

Reputation: 9276

divs are block-level elements, meaning they will always be placed below the previous content (as opposed to inline elements, like span)

  • you could add float:left; to both blocks
  • or use display:table on the container, and display:table-cell on the inside blocks

Upvotes: 0

idrumgood
idrumgood

Reputation: 4924

  1. You need to float the internal divs.

  2. You also need to use a class, since an id should be unique on a page.

    .entry{ float: left; width: 200px; height: 100px; }

Upvotes: 0

arb
arb

Reputation: 7863

You can't (or shouldn't) have two divs with the same ID; for one thing. Secondly, divs are block elements which mean that unless you change the behavior with styling, they will always appear on a new line.

Change your CSS to be like this:

.entry {
    height:100px;
    width:200px;
    float:left;
}

And change your HTML to be like this:

      <div id="1" class="entry" >
      <h1>PHP File Upload/Browser</h1>
      <img src="img/projectimg/fileupimg.png" />
      <p>PHP MySQL CSS</p>
      </div>

      <div id="2" class="entry"  >
      <h1>PHP File Upload/Browser</h1>
      <img src="img/projectimg/fileupimg.png" />
      <p>PHP MySQL CSS</p>
      </div>

That should be enough to get you in the right direction.

Upvotes: 0

Blender
Blender

Reputation: 298106

You have two elements with the same id. The id property is unique, which means that it is used to reference a single element. If you want to group elements together, use class, as it can be used multiple times.

As for the fix, float: left the elements. div elements are blocks, so they don't stay inline. Also notice my overflow: auto statement in the parent element. That is used to account for the floats.

Demo: http://jsfiddle.net/g9bgV/1/

Upvotes: 0

CBRRacer
CBRRacer

Reputation: 4659

add float:left; to you entry class should look like this also of note you should change like I did for you in the code the #entry to .entry and change them to reference a class. the correct use of class is anytime more than one element is styled on the same page it should be set as a class.

<style type="text/css">

#entrycontainer {
    height:100px;
    width:500px;
}
.entry {
    float: left;
    height:100px;
    width:200px;
}
</style>

      <div id="entrycontainer" >

          <div class="entry" >
          <h1>PHP File Upload/Browser</h1>
          <img src="img/projectimg/fileupimg.png" />
          <p>PHP MySQL CSS</p>
          </div>

          <div class="entry"  >
          <h1>PHP File Upload/Browser</h1>
          <img src="img/projectimg/fileupimg.png" />
          <p>PHP MySQL CSS</p>
          </div>

    </div>

Upvotes: 2

Related Questions