1

I have an element nested inside another element (i.e. parent element). The thing is, I want to make the child element wider than the parent element — as I am unable to find the PHP code that I need to move it outside its current parent element.

This is how the page looks (click image to enlarge):

making element wider than parent

THE PLOT: You are seeing two content blocks in the page — <div id="Content">...</div> is one block floating left and <div id="Panel">...</div> is another that's floating right.

See the blue color block of text? It's the title of a discussion thread in my forum and is represented by <div class="Tabs HeadingTabs DiscussionTabs FirstPage">...</div> in the code. As shown by the arrows, I would like to extend it to full width of the page using css width:980px;.

The thing is, <div class="Tabs HeadingTabs DiscussionTabs FirstPage">...</div> is a child element whose parent element is <div id="Content">...</div>. The width of the parent element is 700px, but I need the width of the child element to be 980px.

So what I am doing is this:

  • set the child element's width to 980px. (width:980px;)
  • Now the child element overflows the parent element and on top of the the right-floating block as well. (i.e., <div id="Panel">...</div>)
  • So, I gave the right-floating block some margin-top so that it comes out from hiding below the extended element.

The following image represents just that (click image to enlarge):

element wider than parent

So my question is — is what I am doing okay or is it a bad thing to do? Is this cross-browser compatible? (i.e., does it appear the same across all browsers?)

Hope someone can clarify on this. Thanks.

its_me
  • 10,998
  • 25
  • 82
  • 130

2 Answers2

1

Just move the heading outside of <div class="Content">.

<div class="Tabs HeadingTabs DiscussionTabs FirstPage">
</div>
<div class="Content">
  ...
</div>

Don't use JavaScript just for this, that would be a mistake.

I also feel compelled to mention that I don't think that heading should be full width anyway, it doesn't represent a heading for the sidepanel, it's for the thread (which is only in the left column).

Nick Coad
  • 3,623
  • 4
  • 30
  • 63
0

I wouldn't. As a general rule of thumb, I keep the parents bigger than the children. See this and this. I'm sure you would see differences from browser to browser if you implement this using HTML and CSS.

Have you thought about using JavaScript to accomplish what you want to do?

Community
  • 1
  • 1
  • 1
    No, I haven't considered using JS because [1] I don't think it's a good idea to use JS for styling [2] I don't know JS — all I know is bits and pieces of HTML & CSS. :) – its_me Mar 11 '12 at 08:18
  • Okay. If you are happy with what you have, then I approve. I would use [Adobe BrowserLab](https://browserlab.adobe.com/en-us/index.html) to check cross-browser compatibility. –  Mar 11 '12 at 08:23