Nested Inline Divs?
Posted: 16 April 2007 01:39 PM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2007-04-16

#mainblock {
  
width640px;
  
height400px;
  
background-imageurl(images/mainbg.gif);
  
display:inlinefloatleft;
  
positionrelativetop:-100pxz-index15;
}

#maintenancecontent {
  
width315px;
  
height395px;
  
padding10px;
  
float:leftdisplay:block;
}

#makeovercontent {
  
width315px;
  
height395px;
  
padding10px;
  
float:leftdisplayblock;
<div id="mainblock">
    
      <
div id="maintenancecontent">
      <
p>Maintenance</p>
      </
div><!--maintenanceconent-->
      
      <
div id="makeovercontent">
      <
p>Makeovers</p>
      </
div><!--makeovercontent-->
      
</
div><!--mainblock--> 


So this is the code.

Simply what I want to do is create two columns for text (#maintenancecontent, #makeovercontent) within this containing div which happnens to have to be inline.

I can imagine this is one of the easier problems you’ve come across, but I’m quite the novice.

Thanks for your help.


Johnny.

Profile
 
 
Posted: 22 June 2007 05:39 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  10
Joined  2007-06-21

Try not floating the enclosing div. Not sure if that will make it all work, but that shouldn’t need to be floated.

Profile
 
 
Posted: 23 August 2007 03:33 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  4
Joined  2007-08-21

Why does #mainblock need to be display:inline?

Putting block elements inside of inline elements can trigger off all sorts of weird display issues. As I understand CSS, block elements should never be contained within inline elements.

Also, by default, a div is a block element, so there’s no need to specify display:block for a div.

Profile