How to stretch the header the full width of the screen?

I am trying to stretch the header which is a fluid grid layout div wrapped between body. I have something like the following:
html
<body>
<div class="wrapper">
  <div class="gridContainer clearfix">
<div id="header </div>
  </div>
</body>
CSS
#header {
clear: both;
float: left;
margin-left: 0;
min-width: 100%;
display: block;
Any help would be much appreciated.
KN

Use this CSS:
.wrapper {
    width: 100%;
#header {
    display: block;
    text-align: center;
And use this HTML:
<div class="wrapper">
    <div class="gridContainer clearfix">
        <div id="header"><h1>Header</h1></div>
    </div>
</div>
This should stretch to full width.
Good luck.

Similar Messages

  • How can I make my footer full width of the screen with a fluid grid layout in CSS?

    Any Ideas?
    #footer {
      clear: both;
      color: #FFFFFF;
      min-width: 100%;   // I have tried max-width and width as well.
      margin-right: 0px;
      margin-left: 0px;
      background-repeat: repeat-x;
      background-image: url(/images/footer.jpg);
    I know it is being over-ridden by
    .gridContainer {
      width: 88.5%;
      max-width: 1232px;
      padding-left: 0.75%;
      padding-right: 0.75%;
      margin: auto;
      clear: none;
      float: none;

    Move your <footer> tag below the closing .gridContainer </div> tag.
    Live example:
    Alt-Web :: Fluid Grid Test #4
    Nancy O.

  • How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

    How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
    and I know it is being over-ridden by
    .gridContainer {
      width: 88.5%;
      max-width: 1232px;
      padding-left: 0.75%;
      padding-right: 0.75%;
      margin: auto;
      clear: none;
      float: none;

    Abdelqader Alnobani wrote:
    How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
    and I know it is being over-ridden by
    .gridContainer {
      width: 88.5%;
      max-width: 1232px;
      padding-left: 0.75%;
      padding-right: 0.75%;
      margin: auto;
      clear: none;
      float: none;
    Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
    <div class="gridContainer">
    Top Code Section Goes Here
    </div>
    <!-- close gridContainer -->
    <div id="fullWidth">
    Full width section goes here
    </div>
    <!-- close fullWidth -->
    <div class="gridContainer">
    Bottom Code Section Goes Here
    </div>
    <!-- close gridContainer -->

  • IWDGroup - making it the full width of the screen

    Hi everyone, I am using the IWDGroup element to enclose several other elements, e.g. Table, textview, labels, etc.
    I will be listing several groups on one screen, in order to make them uniform, I'd like to make it by default, stretch to atleast the full width of the screen.  I've tried setting the setStretchHorizontal to be true, however, still this does not work.  Please help.
    Thanks in advance,
    Michael P

    Hi Armin,
    Yes, I have tried setting the width=100%, using the CSS principle as it had suggested.  I'm starting to perhaps think that this is a bug.
    You have always been very helpful in the past, do you have any other suggestions?
    Kind Regards,

  • Is it possible to open iPhoto twice under os-x lion to create a photobook on one desktop and to have a look to the photos in full size on the other desktop?

    Is it possible to open iPhoto twice under os-x lion, to create a photobook on one desktop and to have a look to the photos in full size on the other desktop?

    Ok let me ask you IF the IT department of your workplace does NOT want OS X installed on "THEIR" (The Companies) computers because of what they think is some type of security issue why are you trying to go against their wishes and install OS X on a computer that is NOT owned by you.
    That could cost you your job.
    If you continue down this path you will screw up the Windows install and have to take the system back to the IT department to get it fixed. What do you think they will say at that point?
    Do as you like but you would be better off just buying your own Mac computer if you are set on using OS X as your personal operating system.

  • I have tried to install office for mac and an iWork trial and each time I go to install my "terminal" opens with the heading bash-80X24 and in the box reads Joel$-office installer.mpkg joel$ . nothing further happens

    I have tried to install office for mac and an iWork trial and each time I go to install after downloading my "terminal" opens with the
    heading
    bash-80X24 and
    in the box reads Joel$-office installer.mpkg joel$ .
    nothing further happens

    This is thread from Apple discussions.
    Look for the suggestion from Shootist007 towards the end of the 2nd page.
    It is just may be useful.
    https://discussions.apple.com/thread/3709115?start=15&tstart=0

  • In the header file generated by javah, the package name is not in the funct

    and in the header file generated by javah, the package name is not in the function declaration:
    /* DO NOT EDIT THIS FILE - it is machine generated */
    #include <jni.h>
    /* Header for class VocalJNITest */
    #ifndef IncludedVocalJNITest
    #define IncludedVocalJNITest
    #ifdef __cplusplus
    extern "C" {
    #endif
    * Class: VocalJNITest
    * Method: JNI_1myJNI
    * Signature: ()V
    JNIEXPORT void JNICALL Java_VocalJNITest_JNI_11myJNI (***please not there is no package name in it****)
    (JNIEnv *, jclass);
    #ifdef __cplusplus
    #endif
    #endif
    In the VocalJNITest.java file, I put package com.jni.test in it, why dose it not appear in the VocalJNITest.h file.

    it works,
    thanks alot, but java really confuses me, for example, if i run the app, i need to type the complete name java com/...../jnitest, in which the "/" is used instead of
    ". " like com.vocal.jnitest as the package name in the source file.
    but when using javah, i need to use ". " instead of "/";
    i tried com/vocal/jnitest, but failed so i post the question here.

  • Why was the head phone jack moved to the bottom of the iPhone 5

    Why was the head phone jack moved to the bottom of the iPhone 5

    Because it worked better with the new design, most likely.  To get the real answer you'd have to ask the people that designed it.

  • HT1459 I downloaded a song from itunes to my nano 7th generation. When i play the song i can't hear it with the head phones that came with the nano

    Hi, i downloaded a song from Itunes to my ipod Nano 7th generation.  When i play the song on my Nano i can't hear the song with the head phones that came with the Nano.  what should do?
                                                                                         Thanks for your help.

    Same issue here, but no apparent way to redownload for me in iTunes.

  • Is the Mountain Lion full compatible with the Final with Pro?

    I will like to upgrade from Snow leopard 10.6.8 to Mountain Lion. Is the Mountain Lion full compatible with the Final with Pro?

    OS X Mountain Lion is compatible with Final Cut Pro X and Final Cut Pro 7 updated to the most recent version. If you want to check that your applications are compatible, see > http://www.roaringapps.com
    Make a backup of your data before upgrading in case that Final Cut doesn't work under Mountain Lion

  • How can i expand a Composition to the full width of the browser?

    I want to have a slideshow on the background of my site in the full browser window so i used the blank composition and added photos, I originally made it close to 2000 pixels wide and then I moved back the selection box to the browser line but for some reason it doesn't expand to the width of the browser as it would it a photo. Can someone please help?

    I think you are confused by the question
    THough muse face book answered me with a link to a work around that is not a fix to a very real bug in bot compositions widget and accordion
    Just thought I would put a note here.
    I found the id number in Inspector and targeted it by adding <style>my css</style> to the metadata head of the page:
    Page Properties
    Metadata
    HTML for <head>
    I was then able to center the text frame :-)
    on my site its not there for about 3 days start counting lol and if you want my working files I will sell em to you for good price as long as you strip out my content and change design 
    when I am done I will post
    Vancouver Web Design Home

  • How do I center the text in full width accordion panel?

    Hello!
    Is it possible to center the text to follow the full width accordion widget?
    When you expand to fill the screen, the text are fixed and doesn't follow the center headline...
    I created a page so you see what I'm talking about:  http://fullwidthissue.businesscatalyst.com/index.html
    Please respond if you know what to do or if it's impossible..
    Thanx

    This believe this can be fixed within the <head> of the document. I had the same problem and it took me a bit to figure this solution.
    Step 1
    Find the <div> ID that muse gives to the content portion of the accordion element. you can find this by using a web browser that lets you inspect the code.
    Step 2 once you have that code replace u6174. with your specific <div> then past this into your <Head> of the muse document. Almost forgot.....Get a general idea of the minimum size around your content this example it was a width of 750px. and change the width accordingly on this code.
    <style>
    #u6174{
    width: 750px;
    padding-left: 0px;
    padding-right: 0px;
    margin-right: auto;
    margin-left: auto;
    border-right-width: 0px;
    border-left-width: 0px; "}
    </style>
    you can see a sample of this here:
    Alain Hunkins
    At the bottom is this solution working.
    Let me know if that helps.

  • Importing my video from my event library into my project library, it shows the full width of the clip, but on the viewing section, it's zoomed in and cut the sides of the video off.  How do I stop this from happening?

    When importing my video from the event library to the project library, it's zooming in and
    narrowing the width of my footage.  How do I stop this from happening?

    In the project, double-click on the clip to open the Clip Inspector. In the Clip tab you will see an item about two thirds down labelled "Stabilization". If checked, uncheck the box "Smooth clip motion".
    Stabilizing clips causes a zoomed in effect, with the extent of the zoom dependent upon how shaky the footage is. There is a slider beneath the check-box labelled "Maximum Zoom" - this can be draggged back and forth to adjust the zoom effect if desired, once the clip has been stabilized.
    You may have chosen to analyze clips for stabilization when importing to iMovie (that's a choice provided by iMovie upon import). If so, it's best to turn off an option in iMovie's preferences. Go to this from the iMovie menu item iMovie>Preferences. Click on the Browser tab and deselect (uncheck) the box labelled "Automatically stabilize clips that have been analyzed".
    I prefer to import clips without analyzing, as this speeds up the import process. Afterwards, in the Event you can check for any overly shaky clips, then analyze them in the Inspector. If necessary, once dropped into a Project, you can stabilize them as desired. You can also stabilize clips directly in the Project without having to first analyze them in the Event.
    John
    Message was edited by: John Cogdell

  • How do I make a placed image the full width of the browser?

    Hi, I've tried adding the image as the browser fill only to have it shuffling all other placed objects out of wack.
    I've also tried having it as a placed object but, when I preview in browser I can't seem to be able to get it the full which of the screen.
    my website is 1000 px wide, the image I'm trying to place in it is 5147x2668

    Thanks for the response Vivek,
    Tried that but no joy, it seems I've tried everything I can think of. I tried setting the the image as a browser fill. Very confused. It actually seems to be something to do with the page width or something. Using your method I successfully got the menu bar and the 100% width placed image the same width (previously they were different width's), but my whole site, when previewed just isnt the width of the browser. I must say I'm lost, I've tried changing the site properties (page width, margins etc.) I'm new to Muse but have studied it quite thoroughly over the last 6 weeks. Now I'm ready to build my site I seem to have tripped at the first hurdle here's a screenshot of what I'm getting when veiwed in a browser, as you can see it's all a bit shrunk down:
    and what I'm seeing in Muse's design page:

  • How to schedule Process Chain with Full Update for the past closed month

    Hello,
    I have an HR-BN benefits transactional data extractor - http://help.sap.com/saphelp_nw70/helpdata/en/08/b01d3cf8aa101ce10000000a11405a/frameset.htm
    One of the selection fields for that extractor is calendar year/month 0CALMONTH and it is a full update extractor.
    SAP recommends running this extractor once a month after the month has been closed.
    If I were to include this update/extract into my process chain, would it be possible to automate the process in a way where the process chain is scheduled to execute once a month (I know how to do that), but that also only pulls values for the past/closed CALMONTH (as if it had a variable value of which would be automatically set to the last closed month when pchain is run)? As I mentioned 0CALMONTH is one of the selection criterias in the infopackage for that extractor.
    let me know how I might be able to do that.
    P.S. we are on BI 7.0/2004s
    Thank you

    For Calmonth selection in infopackage you can use the SAP-Exit OLAP Variable 0CMLMON (Last Month)
    select Type "7" ("OLAP Variable")
    and in Details of Type screen, Select OLAP Variable "0CMLMON" Which is SAP-Exit variable for Calmonth, that returns the last month from the current system-date.
    If variable 0CMLMON is not active, you need to activate it from Business content.
    Assign pts if helpful.

Maybe you are looking for