DIV help with css

Ardennes1944

Trying to get a simple table created wth divs with one div spanning 2 columns on top and then 2 divs underneath side by side of equal width.
i have everything needed working except both text pieces of the side-by-side divs wont go side by side. if they do go on their correct columns one has to start once the other has finished. its like there isnt enough width for both but as far as i can see there should be. hard to describe im sorry!

<link rel="stylesheet" type="text/css" href="cssass3.css"/>
<div id="container">
<div id="top"><h1>Arsenal VS Tottenham 5-2 17th.November</h1></div>
<div id="right"><p>Even at 3-1 down at half-time he got his tactics correct by withdrawing both full-backs, reverting to three defenders and asking Aaron Lennon and Gareth Bale to double-up as wing-backs. Arsenal scored again but then Bale reduced the deficit and suddenly Spurs created chances with wave after wave of attacks causing apprehension among the home supporters.
In the end Arsenal repeated the result last February – when they had trailed by two goals and not just the one as they did on Saturday – in a result that kick-started their season and saw them eventually overhaul Spurs for third-place.
Wenger had said then that the outcome had had a “doping” effect on Arsenal’s season but there was only one dope here: Adebayor. In Spurs’ two-tone away shirts he turned in the ultimate Jekyll and Hyde performance and, this morning, Villas-Boas must contemplate on how fortune has deserted him this season with injuries, late goals, some frustrating transfer deals and now this from a striker who will miss the next three matches.
Still Spurs, despite suffering a third league defeat in a row, are moving in the right direction under Villas-Boas and once he gets the likes of Mousa Dembélé back, that luck will change, even if it will be hard to look at the table on Sunday and see that Arsenal have leapfrogged above them. Wenger was indebted to an outstanding performance from Cazorla — all the more galling as he was a player Villas-Boas had wanted to sign — and also to that contract-rebel Theo Walcott, who left the pitch, last off, to a rousing reception. There were also more signs that Jack Wilshere will return to his best form, and that Olivier Giroud can develop into a top-notch front-line striker.
</p></div>
<div id="content"><p>At this rate Emmanuel Adebayor will become a hate figure on both sides of north London. Having baited his former club in comments published on Saturday morning before scoring against them at lunchtime — inevitably celebrating in front of the Arsenal supporters — he was then quickly dismissed for a lunge at Santi Cazorla that turned this derby match on its head and spoiled what was shaping up to be an epic encounter.
“It was not a rose, it was not a yellow, it was red,” said Arsène Wenger of his former striker’s brainless actions, and while Spurs head coach Andre Villas-Boas agreed that referee Howard Webb was probably correct in dismissing Adebayor he also, to a surprising degree, defended his errant player.
“It’s a challenge that happens in the game,” he said, denying that Adebayor was “too pumped up”. There will be no further words, no disciplinary action. There should be.
Adebayor was not just reckless in his challenge; his actions recklessly endangered his club’s fortunes. Villas-Boas also attempted to reason that the sending-off had not proved decisive – “I don’t think it changed the running of the game” – but it clearly was, as a relieved Wenger acknowledged.
Maybe Villas-Boas was simply being protective and, as understandable as that is, his analysis that despite the dismissal Spurs remained largely in control “from first minute to last” was skewed. It was all the more frustrating for him in that he not only went with a bold line-up, with Adebayor partnering Jermain Defoe in attack and the more decisive Hugo Lloris in goal, but he got his tactics right as Spurs attacked and pressed a clearly nervous Arsenal high up the pitch.
</p>
</div>

</div>


css:

#container {text-align:center; width:500px; background-color:red;
color:white; border:1px solid black;word-wrap:break-word}
#content{ border-left:1px solid black;margin-left:230px; border-right:1px solid black;}
#top { background-color:green}
#right { padding:1em; border-left:1px solid black;margin-right:250px; border-right:1px solid black}
p:first-letter
{
background-color:gray;
}
h1:first-line {background-color:black;font-family:palatino linetype
}

appreciate any advice!

smash

You have massive left and right margins on the divs that should be side by side.

Ardennes1944

They meet well in the middle though. Its the best way I can get them to line up at present.

smcelhinney

Some important concepts.

* Fixed widths in floated divs are the devils work. Percentages are your best friend.
* Margins & padding in fixed width divs add to the overall width of the div, so be careful. See point 1.
* If you want to add padding to elements, wrap them in a div first, using a percentage width, and pad away.


If I was marking this up, I would go

<style type="text/css">
.outer { width: 500px; }
.inner { width: 100%; }
.top { background-color: #F90; padding: 12px; }
.middle { width: 100%; }
.left, .right { float: left; width: 50%; }
.left p, .right p { padding: 12px;  }
.left p { border-right: 2px solid #C90; }
</style>

<div class="outer"><!-- You can fix this width if you like -->
  <div class="inner"><!-- 100% width div -->
    <div class="top"><!-- No need to set this width, its inherited -->
      <h1>Arsenal VS Tottenham 5-2 17th.November</h1>
    </div>
    <div class="middle"><!-- set THIS one to 100%, as you need child divs to be relative widths -->
      <div class="left"><!-- 50% width, and "float" it left -->
        <p>Even at 3-1 down at half-time he got his tactics correct by withdrawing both full-backs, reverting to three defenders and asking Aaron Lennon and Gareth Bale to double-up as wing-backs. Arsenal scored again but then Bale reduced the deficit and suddenly Spurs created chances with wave after wave of attacks causing apprehension among the home supporters. 
          In the end Arsenal repeated the result last February &#8211; when they had trailed by two goals and not just the one as they did on Saturday &#8211; in a result that kick-started their season and saw them eventually overhaul Spurs for third-place. 
          Wenger had said then that the outcome had had a &#8220;doping&#8221; effect on Arsenal&#8217;s season but there was only one dope here: Adebayor. In Spurs&#8217; two-tone away shirts he turned in the ultimate Jekyll and Hyde performance and, this morning, Villas-Boas must contemplate on how fortune has deserted him this season with injuries, late goals, some frustrating transfer deals and now this from a striker who will miss the next three matches. 
          Still Spurs, despite suffering a third league defeat in a row, are moving in the right direction under Villas-Boas and once he gets the likes of Mousa Demb&#233;l&#233; back, that luck will change, even if it will be hard to look at the table on Sunday and see that Arsenal have leapfrogged above them. Wenger was indebted to an outstanding performance from Cazorla &#8212; all the more galling as he was a player Villas-Boas had wanted to sign &#8212; and also to that contract-rebel Theo Walcott, who left the pitch, last off, to a rousing reception. There were also more signs that Jack Wilshere will return to his best form, and that Olivier Giroud can develop into a top-notch front-line striker. </p>
      </div>
      <div class="right"><!-- 50% width, and "float" it left, yes left, you want it to snuggle up beside the other one -->
        <p>At this rate Emmanuel Adebayor will become a hate figure on both sides of north London. Having baited his former club in comments published on Saturday morning before scoring against them at lunchtime &#8212; inevitably celebrating in front of the Arsenal supporters &#8212; he was then quickly dismissed for a lunge at Santi Cazorla that turned this derby match on its head and spoiled what was shaping up to be an epic encounter. 
          &#8220;It was not a rose, it was not a yellow, it was red,&#8221; said Ars&#232;ne Wenger of his former striker&#8217;s brainless actions, and while Spurs head coach Andre Villas-Boas agreed that referee Howard Webb was probably correct in dismissing Adebayor he also, to a surprising degree, defended his errant player. 
          &#8220;It&#8217;s a challenge that happens in the game,&#8221; he said, denying that Adebayor was &#8220;too pumped up&#8221;. There will be no further words, no disciplinary action. There should be. 
          Adebayor was not just reckless in his challenge; his actions recklessly endangered his club&#8217;s fortunes. Villas-Boas also attempted to reason that the sending-off had not proved decisive &#8211; &#8220;I don&#8217;t think it changed the running of the game&#8221; &#8211; but it clearly was, as a relieved Wenger acknowledged. 
          Maybe Villas-Boas was simply being protective and, as understandable as that is, his analysis that despite the dismissal Spurs remained largely in control &#8220;from first minute to last&#8221; was skewed. It was all the more frustrating for him in that he not only went with a bold line-up, with Adebayor partnering Jermain Defoe in attack and the more decisive Hugo Lloris in goal, but he got his tactics right as Spurs attacked and pressed a clearly nervous Arsenal high up the pitch. </p>
      </div>
      <div class="clear"></div><!-- this is important.. clear your floats before proceeding.. -->
    </div>
  </div>
</div>

which I think is the effect you're looking for?

Ardennes1944

Thank you very much, I'll try this tomorrow. Much appreciated.

EDIT: it worked perfectly, thanks a million!