Jump to content

what am I to do.


Zane

Recommended Posts

Ok I'm trying to make something really simple.  I've seen this type of layout used many places....I would think it's just two divs side by side.....and the container has full height (which took me forever to figure out as well).

 

Now I've finally got it positioned the way I want...but the only problem is that the right div extends all the way into the left div or something....according the firebug.

 

I want to set padding in the right div....or at least its content child and be happy.

 

Here's my code



      	LEFT
          	
        	
            There is a lot of content in here damnit dkkkkkkkkkkkkkkkkkkkk k kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkk
            
        
    

body,html,#left,#right {
height:100%;
margin: 0px;
padding:0px;
background: blue;
}
div#main {
margin: 0px 12em;
height:100%;
}
#left {
float:left;
}
#right {
background-color:#76D16B;
       padding: 1em;
}
#content {
padding: 1em;
}

 

I can only get it to pad the top and bottom... what's wrong?

here is a screenshot of how it looks

 

 

 

[attachment deleted by admin]

Link to comment
https://forums.phpfreaks.com/topic/143112-what-am-i-to-do/
Share on other sites

This works.

 

html, body {
   height:100%;
   margin:0;
   padding:0;
   background: blue;
}

#main {
margin:0 auto 0 auto;
height:100%;
width:1024px;
}

#right, #left {
color:white;
float:left;
    padding: 1em;
margin:0;
width:15%;
height:100%;
background: blue;

}
#content {
margin:0;
width:60%;
float:left;
height:100%;
padding: 1em;
background-color:#76D16B;
}

 

 

<body>
<div id="main">
<div id="left">LEFT</div>
        <div id="content">
            There is a lot of content in here d@mnit dkkkkkkkkk kkkkkkkkkk k k 
		kkkkkkkkkkk kkkkkkkkkkkkk kkkkkkk kkkkkkkk kkkkkkkkk kkkkkkkkkkkk 
		kkkkkkkk kkkkkkkkk kkkkkkkkk kkkkkkkkkkkkk kkkkkkkk kkkkkk 
		kkkkkk kkkkkkkk kkkkkkkkkkkk kkkkk
        </div>
<div id="right">RIGHT</div>
</div>
</body>

Link to comment
https://forums.phpfreaks.com/topic/143112-what-am-i-to-do/#findComment-750653
Share on other sites

At times though, I've found that simply having padding: 1em; with a single declaration doesn't

work with firefox. Try to be more specific. padding: 1em 1em 1em 1em; for top, right, bottom, left.

 

Hope that helps.

Link to comment
https://forums.phpfreaks.com/topic/143112-what-am-i-to-do/#findComment-752321
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.