div to expand and contract depending on content with float

Forum Moderators: not2easy

Message Too Old, No Replies

div to expand and contract depending on content with float

jon22

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

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

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

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

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