Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old September 8th, 2006, 04:37 PM
Registered User
 
Join Date: Sep 2006
Location: , , United Kingdom.
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Default divs inside divs: theory?

Hi, I'm just starting out making a website but I'm not getting anywhere fast. My design requires that I have a div centered in the middle of the page, and inside that other divs positioned relatively (so that the other items I want to display don't stray outside the contents area). But I have no idea how to manage that. If anyone can let me in on the theory I'd be really greatful. thanks for reading this far.:)

PS I don't think there would be much of a point of showing you the code I have right now, I broke the only working feature (centered div) to try and get divs inside.



Reply With Quote
  #2 (permalink)  
Old September 8th, 2006, 04:51 PM
Registered User
 
Join Date: Aug 2006
Location: Llanelli, , United Kingdom.
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I don't understand your problem. You have created a <div> and styled it for centering etc... Until this <div> is closed any succeeding <divs> must inherit from that original and therefore can only "live inside its constraints" - such as "centered". Where is your problem?

Reply With Quote
  #3 (permalink)  
Old September 8th, 2006, 05:00 PM
Registered User
 
Join Date: Sep 2006
Location: , , United Kingdom.
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Default

That's the thing, when I'm writing something like

<div class="center">
<div class="brand"> something here
</div>
</div>

brand is behaving as if center isn't there at all.
Reply With Quote
  #4 (permalink)  
Old September 8th, 2006, 05:03 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Then you do something to make that happen. What do the rules .center and .brand contain?

--
http://yupapa.com
Reply With Quote
  #5 (permalink)  
Old September 8th, 2006, 05:09 PM
Registered User
 
Join Date: Sep 2006
Location: , , United Kingdom.
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Default

.centre {
text-align: center;
    min-width: 600px;

}
.corporate {
    position:absolute;
    float: left;
    top:0;

    }
Reply With Quote
  #6 (permalink)  
Old September 8th, 2006, 05:16 PM
Registered User
 
Join Date: Sep 2006
Location: , , United Kingdom.
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Default

If someone could give me an example of a <div> that should contain other <divs> in the center that'll probably help me out quite a lot. The effect I'm going for is something like this: http://www.mtv.com.au/shows/shows.php?view=VDM
Reply With Quote
  #7 (permalink)  
Old September 8th, 2006, 05:27 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Yes, that second DIV would "know" nothing about the first DIV.

Two things. text-align aligns inline content (text level), not other block level elements (even if IE6 in Quirks Mode and previous versions of IE think differently).

You may want to read up about what 'position: absolute' does, relative *what* it positions an element.
http://www.w3.org/TR/REC-CSS2/visure...opdef-position
http://www.w3.org/TR/REC-CSS2/visude...-block-details

In your case this is true "If there is no such ancestor, the content edge of the root element's box establishes the containing block." .corporate will be glued to the top of the browser window.

If you want to position it relative .centre you have to make .centre 'position: relative' first. But you don't have to do anything at all to keep ..corporate inside .centre. Just don't position anything at all.

--
http://yupapa.com
Reply With Quote
  #8 (permalink)  
Old September 8th, 2006, 05:50 PM
Registered User
 
Join Date: Sep 2006
Location: , , United Kingdom.
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Yeah, thanks meow, DJB1954. I'll see what I can do tomorrow with that information. Your right meow with your prediction, as is it just sticks to the top.
Reply With Quote
  #9 (permalink)  
Old September 8th, 2006, 05:58 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

I sort of forgot you wanted to center the second div. There are different ways to center a block level element. One way is to give it equal left and right margins.

.corporate { margin: 0 10% }
or if you prefer to write it out
.corporate { margin-left: 10%; margin-right: 10% }

--
http://yupapa.com
Reply With Quote
  #10 (permalink)  
Old September 8th, 2006, 06:09 PM
Registered User
 
Join Date: Sep 2006
Location: , , United Kingdom.
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I actually want the second <div> to be on the border of the first, in the place of a nav bar, for example.

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How do i make my divs slide? Teessider_2000 Javascript How-To 0 March 6th, 2007 02:13 PM
Tables or divs gujjar CSS Cascading Style Sheets 1 January 9th, 2007 08:13 AM
IE5 Problem with divs pgtips HTML Code Clinic 7 February 6th, 2005 02:14 PM
CSS Layout Divs Truce77 PHP How-To 2 March 29th, 2004 07:29 PM



All times are GMT -4. The time now is 10:53 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.