Welcome to WebmasterWorld Guest from 54.163.23.73

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)

5+ Year Member



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)

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



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)

5+ Year Member



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)

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



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)

5+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month