homepage Welcome to WebmasterWorld Guest from 54.205.236.46
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
div to expand and contract depending on content with float
jon22




msg:4372666
 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




msg:4372724
 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




msg:4372786
 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




msg:4372787
 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




msg:4372870
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved