2 columns / 100 percent height divs (Firefox/Safari)

Hey there:

I'll have more trouble that I never imagined to create formatting CSS 2 column (with two columns spanning 100% height of the window). I have spent the whole day trying to figure this out for Firefox/Safari and am about to abadon this for tables.

As the two columns will have different lengths of content, I can't get the shorter column to fill the rest.

I threw up a beta version of this at:
--
gdsquared.com/clients/Ala/index.htm



/ * - This is the wrapper and the two columns containters-* /.

{#wrapper}
Width: 100%;
height: auto;
background-color: #666666;
min-height: 100%;
min-width: 50em;
border: 1px solid #AAAAAA;
}



{.leftColumn}
float: left;
left: 15px;
top: 15px;
Width: 23.4em;
height: auto;
Color: #333;
background: #E4F4F9;
border-right: 1px solid #AAAAAA;
padding: 0;
min-height: 100%;
}


{.rightColumn}
margin-left: 23.4em;
margin-right: 0em;
height: auto;
Color: #333;
background: #FFFFFF;
border: 0px solid #AAAAAA;
padding: 0px;
min-height: 100%;
}

/ * - End wrapper and the two columns containters-* /.


As you will see, the wrapper (dark gray) pokes through depending on the size of the window (related content)
Does anyone have an idea on how to solve this problem and keep the two columns spanned the entire height of the packaging?

Thank you!

gbowhall wrote:

> As you can see, the wrapper (dark gray) pokes through according to the window
> Dimensions (related content)
> Anyone has an idea on how to solve this problem and keep the two columns extend to
> the entire height of the packaging?

There are a couple ways to reach the height of a column of equal when using

The simplest method is a 'hack '. You must use a repeating background
image set on the wrapper

, i.e., a band of blue image clear who is
the same color as your .leftColumn
background, #E4F4F9; and the
same width, 23.4em. The height must be subject of 10px.

Then add it to your wrapper

{#wrapper}
Width: 100%;
height: auto;
background-color: #666666;
min-height: 100%;
min-width: 50em;
border: 1px solid #AAAAAA;
background-image: url(images/col_bg.gif);
background-repeat: repeat-y;

}

There are other methods for javascript (link below), but using a background
the image is the most common way to achieve equal heights.

http://www.Projectseven.com/Tutorials/CSS/pvii_columns/index.htm

Tags: Dreamweaver

Similar Questions

  • battery percentage jumps to 100 percent during charging and falls to 'real' percentage when disconnected

    Hello

    I charge my new iphone 6s and I noticed that evertime I plugged my iphone on my macbook pro, as the battery percentage jumps to 100 percent. Then, when I unplug it, it jumps down to the 'real' percentage. IM currently draining the battery to make a new calibration to see if that fixes the problem. Any ideas on why this might be happening would be greatly appreciated.

    Thank you.

    Drain the battery could do more harm to the battery. Have you ever tried to force reboot the phone by holding down the button sleep and home for 10 seconds, until the Apple logo comes back again? You won't lose data by doing this, but it can cure a few glitches.

    Implementation in the new device would be the next step after that, where force restart does not work.

    Use iTunes to restore your device to factory settings - Support Apple iOS

    If still no luck, get verified by visiting a service provider authorized Apple or Apple Store next to your place. Or contact the Apple Support for repair.

    Find an Apple authorized service provider

    Apple iPhone - contact Support - support

  • HP Photosmart Plus 209 has: com.hp.devicemodel.transportproxy uses 100 percent of the CPU, persistent problem

    Hello

    This process HP com.hp.devicemodel.transportproxy seems to have a life that he has - he's eating 100% CPU, even when finished printing and the printer is not connected.

    The old NET on this http://h30434.www3.hp.com/t5/Inkjet-Printing/com-hp-devicemodel-transportproxy-uses-100-percent-of-t...   suggested delete and update the drivers of HP who I did it - but it did not help and the problem is still there up until I go to System Preferences > printers and to remove the printer (I can't just delet the process in activity monitor, while it keeps!).   Not really elegant.  And if you forget to do it continues to run, 100% of the CPU and becomes very hot, even when the lid is closed.  Not nice.

    No fix for this, HP?

    Ian

  • all-in-one: using 100 percent with windows 8.1 drive

    hard drive shows useage 100 percent at different times. Often at startup and explore different sites on the internet.

    You must also run your antivirus program and software malware program to ensure that there are no viruses or malware.

    In addition, you must run Windows Update.  I read that Microsoft may have known this problem with Win 8.1 and made a update to correct.

    Please click on the Thumbs up button '+' if I helped you and click on "Accept as Solution" If your problem is resolved.

  • In "Services.exe" CPU usage increases to 100 percent XP.

    In "Services.exe" CPU usage increases to 100 percent XP. Attempt to disable Load System Services through the system without result Configuration utility, because cpu cannot handle this function before of 'Services' system of pigs. Is there a way to access msconfig. through BACK? Have tried all modes safe mode, same problem.

    I would exercise caution in handling things in the System Configuration utility.  If you disable the thing (s) evil, you could make your problem worse.

    I suggest provide you a little more information on your system, run some scans for malware, then fix what's left more that needs fixing.

    If you see services.exe equips in the Task Manager, suspect malware first, work to eliminate this possibility (with the scans below), then if you still have a problem, we can fix.

    It makes no sense to try to solve problems on a system that could have malicious software on it.

    You can also try to run system restore if you want, but I don't really know, it counts as 'fixing' of the problem.

    Maybe someday the dialog box 'ask a question' forums XP will ask these questions automatically when a new thread is started so I don't have to ask every time.  It might even be possible to solve a problem in a single response when enough information is provided.

    Please provide additional information on your system:

    What is your system brand and model?

    What is your Version of XP and the Service Pack?

    Describe your current antivirus and software anti malware situation: McAfee, Symantec, Norton, Spybot, AVG, Avira!, MSE, Panda, Trend Micro, CA, Defender, ZoneAlarm, PC Tools, Comodo, etc..

    The question was preceded by a loss of power, aborted reboot or abnormal termination?  (this includes the plug pulling, buttons power, remove the battery, etc.)

    If the system works, what do you think might have changed since the last time it did not work properly?

    No matter what you use for malware protection, perform the following analyses for malware.
    then fix any problems:

    Download, install, update and do a full scan with these malware free
    detection programs:

    Malwarebytes (MMFA): http://malwarebytes.org/
    SUPERAntiSpyware: (SAS): http://www.superantispyware.com/

    They can be uninstalled later if you wish.

    The scans by operating clean, then to solve any problems.

  • Splash screen displays no tiles and drive usage is 100 percent.

    The splash screen displays no tiles. Task bar icons are also empty. My use of the disk is 100 percent, and also the use of the RAM is very high. I have all these huge programs running in order to cause such a problem. Help, please.

    Hello Bryan,

    Thanks for posting your question on the Microsoft community.

    Thank you for details on the issue.

    This problem may occur because of the presence of unused and shortcuts files in Windows. This can also occur due to corrupted

    or missing files Windows.

    I suggest you run the system maintenance utility and check. Please follow these steps:

    a. press Windows + C keys together, and then click Search.

    b. type Troubleshooting in the search box, click on it in the search results.
    c. click on "display all" and then click on "System Maintenance".
    d. click on 'Next' and follow the on-screen instructions.

    It looks unused files and shortcuts that you can clean or remove so that your computer can run faster.

    Please also run checker (SFC) of file system and see if it helps.
    Refer to this article:
    Use the System File Checker tool to repair missing or corrupted system files
    https://support.Microsoft.com/en-us/KB/929833

    System File Checker is a Windows utility that allows users to find corruptions in Windows system files and restore the damaged files.

    Note: It can ask the difficulty Windows installation DVD and allowing SFC to do more than minor repairs. Could some of the files saved on your computer are deleted when fixing corrupted files.

    I hope this information helps.

    Please let us know if you need more help.

    Thank you

  • 100% browser height or width image viewer

    Hello everyone,

    I'm new here but I have a question about the light therapy device. I am looking for a way to view an image in a lightbox that presents the image 100% browser height or width. The unit of light therapy in the muse can only display an image in native format. So if the image is too large for the height or the width of the browser, the image will be cropped.

    Is there a widget or another way to scale the image in a lightbox with the width and height of the browser?

    I hope someone could help me with this.

    You can use any other slideshow with full-width as because lightbox will show the original image centrally on the screen.

    Thank you

    Sanjit

  • Generated html code does not open in firefox/safari when incorporated into an iframe

    Hello

    I was mingling with robohelp for a few weeks now. I can generate a html from a Framemaker book end site. It is integrated in an < iframe > integrate into our website. It works fine on chrome. "However I get on firefox/safari is all ' i ' '. View the source, it becomes obvious that this weird bunch of characters appears before the < html >. I looked into the real generated html code and I see this < feff > tag prefix before the < html > in each file. Naturally, I advanced and removed and the page will now load correctly on firefox/safari. However, the balls are all screwed up. I read a post somewhere that says < feff > contains information about the css classes.

    I use techniques Comm Suite - 3.5(full_version). The webhelp html code is generated using the framemaker publishing feature using a file of saved settings *.isf.

    So, how to fix this? Any suggestions are welcome.

    Thank you

    The "bunch of odd characters" is known as the BOM (Byte Order Mark). The problem is on the server.

    I saw the same thing when you first use RoboHelp 8 and this is what I have been told by the company that hosts my site.

    "I would therefore conclude that the solution to this problem (on Linux systems running Apache) is to add the directive AddDefaultCharset utf-8 on the site's .htaccess file or the Apache config. The advantage of the latter is that it affects only the individual sites. The Apache default character set comes from the file of locale on Linux and defaults to iso-8859-1. It is the conflict between the Apache header with iso-8859-1 and utf-8 character page, which obviously causes problems Firefox. »

    In a post on the chrissy_tissy forum added

    My machine is Windows, but this still worked correction - some notes on post-porn the fix:

    1. make the fix itself (httpd.conf: AddDefaultCharset utf-8).

    2. restart the box to apply the hotfix.

    3. once the box is restarted, clear your FireFox cache to ensure that you do not continue to see the cached file.

    Once all this is done, you will see the contents of output as expected.

    See www.grainge.org for creating tips and RoboHelp

    @petergrainge

  • DW CC sensitive site, Image problem, how can I get my image to stretch in the width 100% in the div container (wrapper)?

    I have a HomeHeader (upper Div) homebody (body div), 4 low box divs (not important). Im trying to get my homebody (body div) to stretch 100% width on the container as My HomeHeader (upper div) did. The two albums div and body divs are IMAGE backgrounds!

    Capture 1.PNG

    Now, I did something interesting that is, changed my homebody (body div) of the background color in the Red image background and it streched:

    Capture 2.PNG

    I don't want a solid color! I want the image that I designed in photoshop CC. I don't understand how I could get my div image to stretch, but not the image of the body. Help, please!

    PS. This is a copy of my CSS

    ICWOT:

    @media only screen and (min-width: 769px) {}

    {.gridContainer}

    Width: 100%;

    margin: 0;

    Clear: none;

    padding: 0;

    float: none;

    }

    {#HomeHeader}

    background-image: url (.. / WebDesign-assets/images/TopFooterH.jpg);

    height: 61px;

    }

    {#HomeBody}

    background-image: url (.. / WebDesign-assets/images/BodyH.jpg);

    height: 653px;

    }

    {#Home1AboutBlock}

    Width: 24.1758%;

    }

    {#Home2ProjectsBlock}

    Width: 24.1758%;

    margin left: 1.0989 per cent;

    Clear: none;

    }

    {#Home3StoreBlock3}

    margin left: 1.0989 per cent;

    Clear: none;

    Width: 24.1758%;

    height: auto;

    }

    {#Home4ContactBlock4}

    Width: 24.1758%;

    margin left: 1.0989 per cent;

    Clear: none;

    }

    {.zeroMargin_desktop}

    left margin: 0;

    }

    {.hide_desktop}

    display: none;

    }

    }

    Please help once again!

    You realize that will only look great on your screen, right?    Background images don't re - adapt to windows.  So for people on larger or smaller screens, it won't have the same experience.

    You could significantly reduce bandwidth by using a smaller picture with this method.

    Resizable background image full Page

    Nancy O.

  • Animation of edge doesn't scale to the width and height div parent

    We have an existing site that was built in 2007, but has been designed to fit perfectly with sensitive css, there were a few hiccups, but this was by far the biggest problem that I have encountered. I'm working on replacing a flash animation with animation that onboard animate cc 2014, I did, and everything went fine until I asked to play well with my existing Web page.

    I was playing with my files for a few days now, and I was wondering if anyone else has this problem. (I've been placing the code manually in html format, and not as a .oam) It seems that my animation of the edge, on the appropriate settings available, insists on the evolution of the size of the port view rather than the size of the parent div I put it in. I came with a difficulty of brute that changes javascript code so that the animation looks at 90% of the display window, but as soon as you resize the window, it goes back to 100%. Which is annoying because I need to be at 90% with a 5% margin/padding on each side (that's what the content div is set to of anyway, so when the edge host is set to 100% width, only go to 100% width of the content div that it is in) and even more embarrassing as that does not even begin to solve my problems with the desktop version of the site. As much as I love the sarcastic musings of my friend in HIM during the afternoon, I think we're both willing to entirely renounce this aspect of the project.

    When I tried to import a media file .oam that he just doesn't appear at all, no code, no javascrip, nothing shows the parent div and empty the stage in development tools (I check the code for troubleshooting purposes through google chrome).

    I'm really at the point where I hope I did something terribly wrong and I'll be able to save this new way to add in the animation. That would be the best case scenario at this point.

    Help, please!

    Here's how I solved the problem

    Configure the animation as w 100% and 100 hour

    You will need to exit mode suitable for it, also uncheck the option to stage at the centre.

    Then, I put a container around my scene in the html code. I call it class = "stagewrap".

    I then added javascript so that stagewrap would retain a certain aspect ratio but the scale to 100% width.

    That's what looked like my html

    My CSS looked like this:

    {.stagewrap}

    margin-top: 20px;

    Width: 100%;

    position: relative;

    overflow: hidden;

    margin-bottom: 30px;

    float: left;

    font size: 2.5vw;

    }

    Some of these styles will have to modify according to your needs or according to your needs.

    x is going to be your ration, which matches your width divided by your height, you can just divide the number of pixels, the units cancel out and that the ratio works for any other unit.

    There is the width to which your animation is 100% resolution without the scale upwards or downwards. It is a VERY important number to keep your overall percentages correctly.

    And z is probably 1, unless you want your text is larger or smaller, you can play with it yourself.

    "In my code, I wanted to also set it so that after a certain width of the window, the animation went to a static size so I did that."

    function setRatio() {}

    If ($(window) () .width)<= s)="">

    SW.height (sw.width () * thisRatio);

    }

    else {}

    SW.height (sh);

    }

    }

    s = the width of the window to which you want the size to go static LESS 1px

    SH = static height that you want the picture to stay in, this number automatically sets the width through the report.

    As insurance, you css for the size of the window, you want the static image to organize at all, the size of the .stagewrap in px

    I hope this helps!

  • right list .column making equal height with lists of middle left and .column .column.

    Hey, I'm back with a simple problem, no doubt, but I am a rookie, so I'm struggling with problems. Note that in the image below, the left and middle columns are of equal height, and the third column is weaker than the rest (it's my problem).

    error 5 when straight lines refuse to be straight.PNG

    My Questions are...

    1. why?

    And.

    2. how to fix this?

    Don't know what I need but here is some vague info.

    The middle column HTML encoding:

    < section class = "column midlist2" >

    < h4 class = "style4" > follow us < / h4 >

    < ul class = "style4" >

    < li >

    < div id = 'class 2' >

    " < p > < a href =" javascript:void (0) "> < img src =" img/Facebook logo.png"alt ="Image of Twitter"width ="30"height ="33"/ > < /a > < a href =" https://www.Facebook.com/expertpcguides "class ="style18"> Facebook < /a > < /p > "

    < / div > < /li >

    < class li 'style10' = >

    < div id = 'class 2' >

    " < p > < a href =" javascript:void (0) "> < img src = ' img/Twitter thanks' alt ="Image of Twitter"width ="30"height ="33"/ > < /a > < a href =" https://Twitter.com/ExpertPcGuides "class ="style18"> Twitter < /a > < /p > "

    < / div >

    < /li >

    < class li 'style10' = >

    < div id = "class3" >

    < p > < a href = "javascript:void (0)" > < img src = "" img / Google + thanks "alt ="Google + Image"width ="30"height ="33"" / > < /a > < a href = " " https://plus.Google.com/115474035983654843441 "class ="style18"> Google more < /a > < /p > "

    < / div >

    < /li >

    < class li 'style10' = >

    < div id = 'class 4' >

    < p > < a href = "javascript:void (0)" > < img src = "img/Pininterest Logo.png" alt = "Google + Image" width = "30" height = "32" "/ > < /a > < a href =" " http://www.Pinterest.com/expertpcguides/ "class ="style18"> Pininterest < /a > < /p > "

    < / div >

    < /li >

    < /ul >

    < / item >

    The third column HTML encoding:

    < section class = "column rightlist" >

    < ul >

    < li > < /li >

    < /ul >

    < h4 class = "style4" > interested in exclusive items? < / h4 >

    < div id = "class1" >

    < div id = 'class 2' >

    < p > < a href = "login.html" class = "style10" > all you need to do is connect / register < /a > < /p > "

    < / div >

    < / div >

    < p > < a href = "javascript:void (0)" > < /a > < br class = "clear" / > ""

    < /p >

    < / item >

    Some random CSS which seems relevant:

    .wrapper footer

    {

    line-height: 25px;

    margin: 0 auto;

    padding-top: 30px;

    Width: auto;

    Max-width: 900px;

    do-size: 14px;

    }

    .wrapper .column footer

    {

    do-family: ' open without ", without serif.

    color: #ababab;

    float: left;

    Width: 280px;

    margin-right: 20px;

    }

    .wrapper footer. column.midlist ul li

    {

    Display: block;

    Width: auto;

    margin-bottom: 10px;

    border-bottom: 1px solid #444444;

    Background: URL(img/arrowright2.png) left no-repeat 6px;

    padding-top: 0;

    padding-right: 0;

    padding-bottom: 0px;

    padding-left: 25px;

    height: 35px;

    }

    .wrapper footer. column.midlist ul li a: hover

    {

    color: #4e72ff;

    }

    .wrapper footer. column.midlist2 ul li a: hover

    {

    color: #4e72ff;

    }

    .wrapper footer. column.rightlist ul li

    {

    Display: block;

    Width: auto;

    margin-bottom: 15px;

    }

    .wrapper footer. column.rightlist ul li a span

    {

    margin-left: 95px;

    Display: block;

    }

    .wrapper footer. column.rightlist ul li an img

    {

    transition: to the frontiere.25s facilitated;

    float: left;

    border: 3px solid #444444;

    }

    It is an excellent example of the increase in the code.  Get rid of the useless stuff and it should work better.

    Style1, style2, style37 for class names is a bad idea.  CSS selector names should tell you what they are used for.  And because the classes combine and reused several times, you don't need a bunch of them.   Less code is cleaner.  Clean code is much easier to work with.

    Nancy O

  • Auto height div?

    I'm working on a model of e-commerce site. It has different columns. Problem 1 - nav columns and column 2 - column content can vary in height. I want to put a div around these two which will automatically size in height if one or the other column pushed down so there is a whole area of intact. Here is an example of extending a column after column 2.

    Appreciate the help. I'm already behind Sunrise this site.

    Picture 1.jpg

    Wrap your floating divisions within a division #container or #wrapper and apply overflow: hidden.  This will contain your floats.

    The magic of the overflow hidden:

    http://colinaarts.com/articles/the-magic-of-overflow-hidden/

    Equal height columns (3 options):

    http://ALT-Web.com/articles/equal-height-CSS-columns.shtml

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • GOOD in Firefox, Safari and IE BAD

    So I used CS3 (DW) to create a Web site and I did all my stable development using Firefox 3.5.3.  When I went to test my pages on Safari and IE8, I had some strange results:

    #1-on pages that show the content, the vertical toolbar spry is not formatted correctly at all (use hyperlinks < li > default bulleted).

    #2-la most of the pages do not show any content at all apart from the background image/color.

    I'm still working on getting the two columns the same width all the time, then you can ignore this problem.  Unfortunately, as I am working on a site for the Navy, he must be ready to go live before I can upload it to our server; Therefore, I must join the pesky files... sorry...

    Example of problem #1: newDefault.html

    Example of problem #2: aboutSWOS.html

    CSS: twoColElsLtHdr.css

    Thank you!!!  I'm hoping to go live with my pages at the end of the week if possible.

    Use these online validation tools and fix the errors reported.  90% of the browser rendering problems are caused by errors in code or orphan tags.

    HTML Validator - http://validator.w3.org 

    CSS Validator - http://jigsaw.w3.org/css-validator/  

    Tutorials HTML & CSS - http://w3schools.com/

    You must have a test server space somwhere or just a folder named TEST which you can temporarilly move the site, upload to a remote server space and debug before you go live. When everything goes out, remove the TEST folder.

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    www.Alt-Web.com/
    www.Twitter.com/ALTWEB
    www.Alt-Web.blogspot.com

  • Question of height div

    http://www.jdcdemo.com/PBC/test.html

    I want to reduce the height of the top div on the page on the page, namely: Nav1. When I added the list to the div to make the menu intems, top space and the low extra went. How to adjust the height to better accommodate content?

    Thank you

    Joe

    Add this to the top of your CSS file:

    / * set the values of default browser on all zero * /.

    * {margin: 0; padding: 0; line-height: 100 %}}

    Then add your own margins & padding to individual tags selector #header #content p, h1, etc...

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    www.Alt-Web.com/
    www.Twitter.com/ALTWEB
    www.Alt-Web.blogspot.com

  • Table to display incorrectly in Firefox/Safari

    New to the forum... thought I'd try and seek help gurus DW here.

    I recently started the difficult process of rebuilding my site as a whole from scratch. I say difficult because I designed this site using iWeb (web wysiwyg wonderfully simplistic but completely limited program Apple) originally and that DW has a learning curve pretty monkeys. I don't know much about HTML and am always read all that I can learn how to really use CSS. In fact, I bought some of these missing manual books on DW, Flash and CSS and have been through chapter by chapter to try to get a handle on these robust programs.

    Whatever it is, I tried everything I can think of to get this table looking right... I created classes CSS for what I think is correct and have tried to change the height and width by setting appropriately. The table is not aligned correctly, seen in Firefox or Safari, but much better displays in Internet Explorer.

    If anyone here knows how I can fix this, I'd appreciate it.

    the page in question is here: http://homepage.mac.com/dvdflashbacks/New_DVD_FB_Site/Pricing.html

    and the original page which will display the most appropriate what I am trying to achieve with this table can be found here:
    http://www.dvdflashbacks.com/

    Thanks in advance.

    Solution:
    Remove all the

    Tags and replace them with tags . Then add
    required tags for the line spacing.

    For anyone with a similar formatting problem this solution which was used to correct my mistakes of vertical spacing in this table proves yet once the know-how of html code will beat everytime to wysiwyg.

    If one of my good friends who is a developer of the app has taken a glance at the page in question. In a few seconds he explained the problem. Apparently when typing anything in DW the default tag ends up being

    for paragraphs. This seems to cause a few erroneous page spacing problems depending on browsers and you end up with text that has way too much space. Once removed all displayed correctly in all three browsers.

    Now I just need to clean the rest of the code and everything will be ready to go!

Maybe you are looking for