Webb Food Services

From the to-do list: CSS/Dev Bugs

✔ journal section fill container issue

Comments

Taylor Bernard on March 10, 2015:

http://client.fleeangrybear.com/webb/maverick/journal.html

ok, i have a container, with these two divs in it. but for some reason, after i close the first div and insert the next, its not filling up the rest of the space available, its throwing it back up at the beginning, so overlapping the 2 divs on top of each other. i turned one off so you could see the link above, and then how screenshot below its adding it behind it instead of to the right.

Taylor Bernard on March 10, 2015:

css:

.journal_container_blog {
display: block;
position: relative;
z-index: 1;
width: 1080px;
height: 360px;
margin: 0 auto;
background-color: #fff;
}


           

          .journal_container_blog .blog_photo_bg {
          display: block;
          display: relative;
          z-index: 2;
          width: 616px;
          height: 360px;
          background: url('../img/projects_widget_background_wide_one.jpg') no-repeat 0 0;
         
          }


          .journal_container_blog .blog_widget {
          display: block;
          position: relative;
          z-index: 3;
          width: 463px;
          height: 360px;
          background-color: gray;
        
          }


                      .journal_container_blog .blog_widget .background {
                      display: block;
                      position: absolute;
                      z-index: 4;
                      top: 43px;
                      left: 32px;
                      width: 343px;
                      height: 320px;
                      background-color: red;
                     
                      }



                                .journal_container_blog .blog_widget .background .date {
                                display: block;
                                position: relative;
                                z-index: 8;
                                width: 180px;
                                height: 10px;
                                top: 33px;
                                float: right;
                                font-family: 'CalibreRegular';
                                font-size: 16px;
                                color: #919295;
                                text-align: right;
                                }



                                .journal_container_blog .blog_widget .background .header {
                                display: block;
                                position: absolute;
                                z-index: 5;
                                width: 90px;
                                height: 20px;
                                top: 33px;
                                left: 33px;
                                font-family: 'CalibreSemibold';
                                font-size: 16px;
                                color: #919295; 
                                    
                                }



                                .journal_container_blog .blog_widget .background .title {
                                display: block;
                                position: absolute;
                                z-index: 7;
                                width: 280px;
                                height: 60px;
                                top: 85px;
                                left: 33px;
                                font-family: 'CalibreSemibold';
                                font-size: 24px;
                                color: #262424; 
                                   
                                }
     



                                .journal_container_blog .blog_widget .background .copy {
                                display: block;
                                position: absolute;
                                z-index: 9;
                                width: 460px;
                                height: 130px;
                                top: 161px;
                                left: 33px;
                                font-family: 'CalibreRegular';
                                font-size: 21px;
                                line-height: 27px;
                                color: #262424; 
                                   
                                }

Taylor Bernard on March 10, 2015:

html:

    <!-- Begin journal_container_blog -->
    <div class="journal_container_blog clearfix">

        <div class="blog_photo_bg"> </div>
   
        <div class="blog_widget">
            <div class="background">
                <div class="header">
                BLOG
                </div>
                <div class="date">           
                April 16, 2015
                </div>
                <div class="title">
                Lipsum et Varnum Carpe<br />
                Solus Domine
                </div>
                <div class="copy">
                Lorem ipsum dolor sit amet, consec-<br />
                tetur adipiscing elit, sed do eius-<br />
                mod tempor inci didunt ut labore<br />
                et dolore magnag
                </div>
     

            </div>
        </div>

   
    </div>
    <!-- End journal_container_blog -->

Taylor Bernard on March 10, 2015:

so theres ' journal_container_blog' thats 1080 wide.
first placing 'blog_photo_bg', then closing it cause its just an image
then starting 'blog_widget' and filling it with content, closing it, closing whole container. so it should space [ A  B  ]

Taylor Bernard on March 10, 2015:

weird cause i'm using the same methods to horz place the employee images on the 'about' section, and they populate just fine. and not using any left aligns or anything on the 2 sections so its not manually pulling it over to the left or anyting

Taylor Bernard on March 10, 2015:

what it should look like as ref: