3 replies [Last post]
Lokki
Lokki's picture
Offline
newbie
Last seen: 2 years 31 weeks ago
Timezone: GMT+2
Joined: 2011-12-12
Posts: 1
Points: 2

Hello everyone
I have one small problem.
I want to move the h1 tag at the top of the left column and to extend it at the same size of the colum.
This is the point where I stuck.

Untitled-2.png

this is my code for my left column.

#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background:#F6F0E0;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
 
#leftcolumn h1 {
	margin: 10px 0 10px 0; 
	padding: 5px 5px 5px 8px;
	font-size: 105%;
	color: #FFF;
	text-transform: uppercase; 
	background: #333; 
	letter-spacing: 1px;	
}
 
#leftcolumn .left-box {
	border: 1px solid #EBEBEB;
	margin: 0 0 5px 0;	
	background: #FFF;
}

and this is my html code

<div id="leftcolumn">
    <h1>Login</h1>
  		<div class="left-box">
 
		</div>
  </div>

can someone give me some tips?

Senff
Senff's picture
Offline
Regular
Montreal, Canada
Last seen: 2 years 12 weeks ago
Montreal, Canada
Timezone: GMT-4
Joined: 2011-12-13
Posts: 16
Points: 19

Right now, the H1 takes up as

Right now, the H1 takes up as much space as it can. If you want it to take up ALL the space (touching the borders of the #leftcolumn), then you'll have to remove the left- and right padding of the #leftcolumn, and apply a left/right margin on the .left-box.

mS

prasad
Offline
newbie
Last seen: 2 years 29 weeks ago
Timezone: GMT+5.5
Joined: 2011-12-05
Posts: 7
Points: 7

modified code

Currently #leftcolumn has padding of 10px, thats why H1 is not touching edges. Here is the modified code:

#leftcolumn {
     color: #333;
     border: 1px solid #ccc;
    background:#F6F0E0;
    margin: 0px 5px 5px 0px;
    padding: 10px 0px;
    height: 350px;
    width: 195px;
    float: left;
}
 
#leftcolumn h1 {
        margin: 10px 0 10px 0; 
        padding: 5px 5px 5px 8px;
        font-size: 105%;
        color: #FFF;
        text-transform: uppercase; 
        background: #333; 
        letter-spacing: 1px;    
}
 
#leftcolumn .left-box {
        border: 1px solid #EBEBEB;
        margin: 0 10px 5px 10px;
        background: #FFF;
}

and html code

<div id="leftcolumn">
    <h1>Login</h1>
     <div class="left-box">
 
      </div>
</div>

prasad,
[not eligible for sig link ~gt]

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 48 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You don't have to remove the padding on #leftcolumn

Because presumably you want everything in the column to be moved away from the edges of the box except the heading. So instead give the h1 negative top, left, right margins of -10px to counteract the padding of the container, i.e. #leftcolumn h1 { margin: -10px -10px 10px }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference