Hi,

I´ve been reading posts and documentation for a couple of days on how to make a full width div that stretches the whole size of the browser, but no workaround found so far. I want only the conten-top region to has a full width while keeping the information centered in the layout.

In layout.css I remove from #page the {margin-left: auto; margin-right: auto; width: 960px;} values and assigned them to div#content-top.region.region-content_top. This may leave the #content-top with no size restrictions, but the problem here is that the #content-top is included within #content, a div which is define by a line that reads:

#content,
.no-sidebars #content
{
float: left;
width: 960px;
margin-left: 0;
margin-right: -960px;
padding: 0;
}

Obviously if I try to remove that, everything is screwed in the layout. I tried to figure out how to accomplish the full width #content-top by separating it from #content in page.tpl.php, but I don´t know to what extent this may affect the SEO capability of the theme. For that reason I prefer to leave the original structure of the theme unaffected.

Any suggestions about how to proceed?

Comments

gmclelland’s picture

gmclelland commented

Perhaps this helps,
http://drupal.org/node/703430

edulterado’s picture

edulterado commented

Hi there!

Thanks a lot for your suggestions, I finally performed a variant very similar to the solution provided in that thread.

But I guess the solution of the thread will work better if you want the header to be 100% full width. Otherwise, what is contained within "main" (such as #content or #content-top) will be limited to 960px width.

shruti.sheth’s picture

shruti.sheth commented
Status: Closed (fixed) » Active

Hi,

To fix this problem the following may be one of the solutions,

1. define the following code in your page.tpl.php 

 <?php if ($content_top): ?>
          <div id="content-top" class="region region-content_top">
            <?php print $content_top; ?>
          </div> <!-- /#content-top -->
        <?php endif; ?>

outside the
the content div

and inside the
main div

2. Give appropriate css to #content-top i.e.

#content-top {
  float: left;
  width: 100%;
}

Thanks

edulterado’s picture

edulterado commented
Component: CSS/HTML Markup » layout.css
Status: Active » Closed (fixed)

Status: Active » Closed (fixed)

Correcting issue status, see #2125263: Issue status not taken from last comment during D7 migration.