Jump to content

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.