How to add the background color to the whole "right" area?


Here is my code. I would like to add the backround color to the whole right area like in the resume example (“objective” and other headlines and sentences.) but right now it covers only part of the objective word and not whole.

<!DOCTYPE html>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <div id="header"><p id="name">Maria</p></div>
    <div class="left"></div>
    <div class="right"><h4>Objective</h4>
    <p> To raise money for my application </p>
    <div id="footer"></div>
#header{color: #000033; font-family: Impact; font-size: 10px; border-radius: 5px; position: fixed; z-index: 1;}

.left{border-radius: 5px; height: 50px; width: 50px; float: left;}

.right {border-radius: 5px; height: 50px; width: 50px; float: right; margin-right: 20px; background-color: #FFE7BA;}

#footer{color: #499DF5; font-family: Impact; border-radius: 5px; width: 100px; height: 30px; clear: both;}

h4{margin-left: 5px; margin-right: 20px; font-family: Garamond, serif;}

#name{margin-bottom: 15px; margin-left: 5px;}

Edit: also the text in the white window looks very small.

you can just put the values for height and width to auto or you should increase the values from 50px.
Focus on your.right.

1 Like

It looks a bit not so nice looking, is it alright if i make some changes and some suggestions?

1 Like

Sure. My code is not very nice right now.

Okay, i tried to keep it simple, what do you think of this? I mostly changed some width, height. Added some background-color. does look better don’t you think?

1 Like

Yes, it looks much better now. Thanks :slight_smile:

You understand what i did?

Yes I did. You for example made the right and left boxes equally far away from the top margin. And you shaped the right and left id’s in a symmetrical/same kind of way in CSS etc. Sorry I can not explain better but I understand how this is different now.

i added the margin-top, if i wouldn’t have done that, a bit of .left and .right would be behind the header (because your #header is fixed)

I hope you like it, seems you do understand the code, that is important