homepage Welcome to WebmasterWorld Guest from 54.161.246.212
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
div to expand and contract depending on content with float
jon22

5+ Year Member



 
Msg#: 4372664 posted 11:06 am on Oct 10, 2011 (gmt 0)

The main div that holds the content has a width of 100% on the homepage, however on the category page there is a navigation with a width of 200px (on the left) and so the main content has to shrink and be floated next to it. how is this possible?

I've tried float:left on the navigation but it will only work if i change the width of the content to 75%..makes sense but then the div is 70% on the homepage where it needs to be 100%

How do i get both to work?

noob designer need a little help :)

currently the content is 75% wide

[edited by: alt131 at 11:40 am (utc) on Oct 10, 2011]
[edit reason] Thread Tidy [/edit]

 

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4372664 posted 1:36 pm on Oct 10, 2011 (gmt 0)

The main div that holds the content has a width of 100% on the homepage, however on the category page...


If the style of the element is dependent on the page, rather than the content (as you seem to suggest in the title), then can you not simply have two different style rules?

You could apply a class (or an id) to the body element, whilst keeping the same id on the content element. eg....

<body id="category"> 
<div id="content">...</div>


#content { 
width: 100%;
}
#category #content {
float: left;
width: 75%;
}



OR... you could use the adjacent sibling selector (+)... if the content always follows the navigation (if any) then...

#content { 
width: 100%;
}
#nav + #content {
float: left;
width: 75%;
}

jon22

5+ Year Member



 
Msg#: 4372664 posted 3:42 pm on Oct 10, 2011 (gmt 0)

Hi there,


It's an index.tpl file so I don't think i can do the first solution.
I tried the second fix but the content div is still 75% on the home page.

topr8

WebmasterWorld Senior Member topr8 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4372664 posted 3:45 pm on Oct 10, 2011 (gmt 0)

float the navigation div to the left and make it the first element inside the main content div

jon22

5+ Year Member



 
Msg#: 4372664 posted 4:54 pm on Oct 10, 2011 (gmt 0)

I've fixed it now, ended up using a different div for the main homepage content and use the previous 'content' div just for the category content.
just a tad more confusing cos it's Xtemplate system with tpl files.
Ta for the help

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved