CODEWITHSUNDEEP
htmlcss
Luke G
Luke G

Reputation: 79

placing 3 divs next to each other

Index code

     <div id="pageMiddle">
    <div id="midleft">This is a test to make sire everything is ok. This text will be removed once the test is complete and everything is working fine.</div>

<div id="midmid"><?php include_once("modules/twitter_twr.php"); ?></div>

<div id="midright"><?php include_once("modules/random_profiles.php"); ?></div>

CSS

    #pageMiddle {
     width: 1000px;
     margin: 0px auto;
     height: 900px; 
}
#pageMiddle > #midleft {
     width: 200 px;
     margin: 0px;
     float: left;
}
#pageMiddle > #midmid {
     width: 600px;
     margin: 0px;
     display: inline;
}
#pageMiddle > #midright {
     width: 200px;
     margin: 0px;
     float: right;
}

I have tried many ways to do this. I just can't seem to get my head around it at all. I am trying to get it so all divs sit nicely next to each other so I able to fill them with content for the index page basically. Thanks for your time to look at it and I hope you can correct my mistakes as I suck at CSS.

Upvotes: 1

Views: 923

Answers (2)

Rayan Bouajram
Rayan Bouajram

Reputation: 743

The issue here is display:inline does not allow you to use the width attribute in CSS.

This should fix it with the current code you have now:

#pageMiddle {
     width: 1000px;
     margin: 0px auto;
     height: 900px; 
}
#midleft {
     width: 200px;
     margin: 0px;
     display: block;
     float: left;
}
#midmid {
     width: 600px;
     margin: 0px;
     display: block;
     float: left;
}
#midright {
     width: 200px;
     margin: 0px;
     display: block;
     float: left;
}

Also, since you're using floats, it's generally best to have your float divs lay above non-float divs (if you're trying to achieve a single row). Your HTML syntax should be as follows:

<div id="pageMiddle">
    <div id="midleft">This is a test to make sire everything is ok. This text will be                 removed once the test is complete and everything is working fine.</div>

    <div id="midmid"><?php include_once("modules/twitter_twr.php"); ?></div>

    <div id="midright"><?php include_once("modules/random_profiles.php"); ?></div>
</div>

Here's the fiddle (added backgrounds so you can see the distinction between divs): http://jsfiddle.net/g732A/1/

Note that this isn't the best way to write columns, but it does achieve what you're trying to do.

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

DEMO
Actually this is all you need: 

#pageMiddle {
  width: 1000px;
  margin: 0px auto;
  height: 900px;
}
#pageMiddle > div{
  float: left;
}

than you can just set your widths:

#midleft,   #midright {
    width: 200px;
}
#midmid {
    width: 600px;
}

Note there's no need to use #pageMiddle > #midleft cause ID is already unique-per-page.

Upvotes: 1

Related Questions