Need to remove right box on inner page only!

HTML & CSS
1

Hi guys,

I need to remove on my inner page the right box, code:

<div id=“right”>
<div class=“box”>

</div>
</div>

This will be only on one specific page, since I want to display here an Iframe whichis covering most part from left to right.

When I remove the divs on this page, the layout/design disappears and shows only a white page with the Iframe.

How can I simply remove my right box on this page only and still keep the layout intact?

Many thanks!

2

Assuming you simply just DONT CODE it into that specific page, CSS allows you to not display the box ( it will still be there… visible if you turn CSS off or use view source… just so you know).

Anyway, the easy technique for this to ad a class to your body tag or page wrapper.

example:

<body class=“targetPage”> … </body>

now you can hide the content using :

body.targetPage #right {display:none;}

Hope that helps .

3

Where do I place exactly within my code :

body.targetPage #right {display:none;}

And do I need to remove the exiting rightbox div tags as well?

4

Something like this should do the trick:
div#right
{
visibility:hidden;
}

This will hide the contents of the DIV while maintaining layout

5

I tried to make the changes as mentioned above, but my right side bar still shows.

I need exact guidelines where to add the code, which changes I need to make, etc. since I don’t have much CSS knowledge. :slight_smile:

Many thanks!

6

Hi,

  1. I added class “targetPage” to my body tag on my particular inner page.
  2. I added between my head tags on my particular inner page:

<style type=“text/css”>
body.targetPage #right {display:none;}

Now it does show the layout, but no text or content whatsoever on the whole page!

What did I do wrong?

Many thanks!

7

you don’t have to put the code in the individual page, thats the beauty of this method. you can put it in your general style sheet.

As far as ALL the content disappearing… was all your content contained within #right? or perhaps you forgot to close a div tag…

8

So… I placed inside my particular page <body class=“targetPage”></body>

Where do I place within my CSS file body.targetPage #right {display:none;} ?

I placed it now here, but still shows me only layout no content (when I change it back to my original coding, everything is ok):

/**** Sidebar ***/

#right {
width: 315px;
float: right;
display:block;
margin-top: 10px;
}

#right .box {
width: 280px;
background: #F6F9FB;
border: 1px solid #E1E1E1;
padding:10px 10px 15px 10px;
float: right;
body.targetPage #right {display:none;}
}

#right .box h2 {
font-size: 1.1em;
margin: 0px 0 0px 0;
padding:0px 0 5px 0;
}

#right .box a {
margin: 10px 0 10px 0;
color: #56677C;
font-size: 10px;
}

#right .box p {
margin: 5px 0 10px 0;
line-height: 15px;
}

#right .box ul {
padding: 0 0 7px 20px;
margin:10px 0 10px 0;
}

#right .box li {
margin-top:5px;
}

/**** Clear Div ***/

#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}

9

Dresden Phoenix,

It’s working now. Thanks! :slight_smile: