how to make full width div inside container

Question

I like to make the header full width across the screen, the wrapper is 1052px and want to extend that while the logo and the menu stay in place.

Is there a way to expand the inner div to the full screen width in a responsive layout?

How can I fix this with css keeping in mind that "menu" is fixed at top and "full width" div must scroll normally? I think I cannot use absolute positioning. I hope it's clear, otherwise I'll try to improve the question.

here is the header.php code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php wp_head(); ?>

</head>

<body <?php body_class() ?>>

<div id="wrapper">
    <div id="inner-wrap">
        <div id="header" class="fullwidth">
            <div id="logo">
                <?php if (!option::get('misc_logo_path')) { echo "<h1>"; } ?>

                <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>">
                    <?php if (!option::get('misc_logo_path')) { bloginfo('name'); } else { ?>
                        <img src="<?php echo ui::logo(); ?>" alt="<?php bloginfo('name'); ?>" />
                    <?php } ?>
                </a>
<div id="header-amp"></div>
                <?php if (!option::get('misc_logo_path')) { echo "</h1>"; } ?>
            </div><!-- / #logo -->


           <nav class="main-navbar" role="navigation">

              <div class="navbar-header">
                  <?php if (has_nav_menu( 'primary' )) { ?>

                     <a class="navbar-toggle" href="#menu-main-slide">
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </a>


                     <?php wp_nav_menu( array(
                         'container_id'   => 'menu-main-slide',
                         'theme_location' => 'primary'
                     ) );
                 }  ?>


              </div>

              <div id="navbar-main">

                  <?php if (has_nav_menu( 'primary' )) {
                      wp_nav_menu( array(
                          'menu_class'     => 'nav navbar-nav dropdown sf-menu',
                          'theme_location' => 'primary'
                      ) );
                  } ?>

              </div><!-- #navbar-main -->

          </nav><!-- .navbar -->
          <div class="clear"></div>

             <div class="clear"></div>

        </div><!-- / #header-->

       <div id="main">

Leticia · Answer 1 · 2018-12-19T04:22:24.840

#inner-wrap{
    width: 100vw; /* make it 100% of the viewport width (vw) */
    margin-left: calc((100% - 100vw) / 2);  /* then remove the gap to the left of the container with this equation */
 }

The left margin equation is the key to get full width inside a container.

First, I get the total size of the container gap in a negative number (so the margin can be negative): 100% of the container - window size ( 100% - 100vw).

And last, I divide in half (the result above is for both left and right sides, so I just need the size of the left).

In summary, I'm making the inner-wrap width the same as the viewport width, then pull it to the left without using position:absolute or position:fixed, which would break the layout if you need more content below it.

You may need to adjust the parent if the 100% of the calc doesn't get the right size. position:relative can help.

Getting horizonatal scroller when we implement this. Please suggest how to hide scrool — Shashikanth HR, Dec 13 '21 at 17:21
@ShashikanthHR, you can remove the horizontal scrollbar by applying somthing like this: `html, body { overflow: hidden; }` — Marcos Buarque, Nov 15 '22 at 20:16

score 0 · Answer 2 · answered Aug 04 '21 at 19:28

#inner-wrap{
    width: 100vw;
    position: absolute;
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50vw);
}

This is another option for a full-width container using absolute positioning. The parent item must be set to position: relative;

how to make full width div inside container

2 Answers2

Linked