www.webdeveloper.com
Results 1 to 3 of 3

Thread: Height: auto; not working - div showing in and outside of border

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    Height: auto; not working - div showing in and outside of border

    For some reason the height:auto isn't working.
    It is not increasing in length to accommodate the class.
    The text displays in and outside of the border.

    the css code is;
    Code:
    .calendar {margin-top: 15px;
            Position: relative;
            width: 94%;
            height: auto;
               border-style: solid;
               border-width: 1px;
               border-color: black;
             padding: 10px 30px 10px 10px;
             }
    .calendar img { border-style: outset;
                    border-width: 4px;
                    border-color: #D5D6FF;
                   }
    .calendar img.align-left {position: relative;
                             }
    .calendar-txt {position: absolute;
                 top: -25px;
                 left: 300px;
                 width: 300px;
                   font-family: arial,san-serif;
               font-size: 1.00em;
               padding: 10px 30px 10px 10px; 
               }
    .level-8 { position: absolute;
               top: 15px;
               left: 200px;
               font-family: arial,san-serif;
               font-size: 1.00em;
              }
    .calendar-txt-2 {position: absolute;
                     top: 200px;
                     left: 200px;
                     width: auto;
                   font-family: arial,san-serif;
                  font-size: 1.00em; 
                  }
    the html code is;
    [CODE<div class="calendar">
    <img src="http://www.what-do-christians-believe.co.uk/wdcb-images/cal-page.png" alt="Photo of Stockholm" />
    <div class="calendar-txt">
    <h3> 2014 Calendar A3 size</h3>
    </div>
    <div class="level-8">
    <h4> Level 8 reward</h4>
    <p>Donate 71$ (47.40, 54,60) or more </p>
    <p> * Receive this calendar and all the above gifts<br/>
    * A mention in the What do Christians believe<br/>
    &nbsp;&nbsp; newsletter</p>
    </div>
    <div class="calendar-txt-2">
    <h4> Calendar details; </h4>
    <p> A3 size (297 x 420 mm - 16.5 x 11.6 inches) <br/>
    <p> Printes on Silk photographic paper richer colours<br/>
    1 page per month plus cover<br/>
    12 differant photographs </p>
    </div>][/CODE]

    You can see the url here The section calendar at the foot of the page.

    How do I put this right?

  2. #2
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Just tried to post a reply and the post was deleted because it was 2 characters too short. So happy!

    I have been working on this by using fixed heights. It doesn't work in all instances.

    In one section I use -350px just to position some text in a box.
    I need to reduce the height of the box but when I adjust it the text box moves.

    The css code is below;
    Code:
    .magnet {  border: 1px solid black;
            padding: 10px 30px 10px 10px;
            Margin-top: 15px;
            width: auto;
            height: 350px;
             }
    .magnet img { position: relative; 
                  left: 15px;
                   border-style: outset;
                    border-width: 4px;
                    border-color: #D5D6FF;
                  }       
    
    .level-4 {  Position: relative;
               top: -310px;
               left: 250px;
               font-family: arial,san-serif;
               font-size: 0.80em;
             }
    You can see the problem here http://www.what-do-christians-believ...st/indexd.html

    The bit that is causing the problem is the photographic fridge magnet section.

    I'm also not sure about using negative numbers to position text.

    I am using position: relative as I am not sure that absolute will work in mobile devices.

    Is there a way to solve this problem?

  3. #3
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    I've decided to set the height. The problem will be making them responsive. I have thought of changing the px to em but that doesn't work properly on my browser (chrome). I'll try changing it to em when I use @media.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles