3 Replies - 687 Views - Last Post: 13 April 2013 - 12:55 AM

#1 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

Header not going inside the wrapper/container?

Posted 12 April 2013 - 07:46 PM

I want the .header to go inside the .main-container div, although at the moment it just sits on top of it - pushing the main-container down. Here is my code:

.main-container {
	width: 965px;
	height: 2410px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -929.5px;
	margin-left: -482.5px;
	background-color:blue;
	
		
}

.header {
	width: 100%;
	height: 551px;
	background-color:red;	
	
}
	



I'm new to coding, thanks in advance! x

Is This A Good Question/Topic? 0
  • +

Replies To: Header not going inside the wrapper/container?

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: Header not going inside the wrapper/container?

Posted 12 April 2013 - 08:03 PM

Hey.

First of all, this isn't coding, it's more like designing. Coding is what you do in programming languages, which HTML and CSS are not. ;)

Anyway, on to the question. The main-container element is positioned absolutely, and by the looks of it appears to be positioned near the absolute center of the screen. The header element is not "pushing" it anywhere. Absolutely positioned elements are not affected by the normal flow of elements, with the exception of those who's parents are relatively positioned, in which case the element's absolute positioning is relative to that parent element. (Which I don't see being an issue here.)

So, in short, if you want the header div to go inside the main-container div, I suggest you move the HTML around so that the header div is actually inside the main-container div.

This is all just based on those two style blocks though, so there may be things I'm not seeing that affect how these elements look. Could you show us the HTML that goes with this CSS as well?
Was This Post Helpful? 1
  • +
  • -

#3 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

Re: Header not going inside the wrapper/container?

Posted 12 April 2013 - 11:19 PM

Oh right,

So yeah this is basically the first step I have tried in Dreamweaver, after designing it - so there is only currently the main container, and that header (and a background).

<body>
	
<div class="main-container">
    
  <div class="header">
        
        </div>
    	
    
  </div>

</body>



I think I do have the header div inside the container div?

But here's what the design looks like: Design

I was trying to get the '.header' inside the container - and sit like the design does. Should I change their position to relative or something. Thanks so much for the reply :)
Was This Post Helpful? 0
  • +
  • -

#4 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

Re: Header not going inside the wrapper/container?

Posted 13 April 2013 - 12:55 AM

View PostAtli, on 12 April 2013 - 08:03 PM, said:

This is all just based on those two style blocks though, so there may be things I'm not seeing that affect how these elements look. Could you show us the HTML that goes with this CSS as well?


Basically it looks like this now:

Posted Image

When it should look like:

Posted Image
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1