SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Buggy Layout

  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Buggy Layout

    http://earajinam.com/dev/index.html

    Hello All,

    I have attached a link to my website, which I am trying to fix. One thing I can't seem to fix the work section, b/c if the description about the project stays at a set character limit then the whole layout looks fine (i.e project 2 or image 2 -- area ). Now if the description goes beyond a certain chracter count, then everything goes wonk (ie. project1 / image 1 ).

    Ignore the colors in the work section, as they are only their for visual purpose. Any help would be appreciated.


    HTML
    <div class="wrapper clearfix">

    <h2>Work</h2>

    <article class="artwork">

    <h3>Campaign Ad</h3>
    <h4>Tiffany & Co.</h4>
    <p>This was a challenging class project, where we had to create a web banner ad that would reflect a unique company like Tiffany & Co. My inspiration was derived from Tiffany's popular display windows, where they would display their jewelery in a creative setup. Hence I used the Japanese cranes as symbolic animal for peace, the elegance, and the love
    that transpires from this beautiful bird.This was a challenging class project, where we had to create a web banner ad that would reflect a unique company like Tiffany & Co. My inspiration was derived from Tiffany's popular display windows, where they would display their jewelery in a creative setup. Hence I used the Japanese cranes as symbolic animal for peace, the elegance, and the love
    that transpires from this beautiful bird.</p>

    <figure><img src="images/proj1.jpg" alt="Tiffany&Co."></figure>

    </article>

    <article class="artwork">

    <h3>Dvd Jewel Cover</h3>
    <h4>Inception</h4>
    <p>This was a challenging class project, where we had to create a web banner ad that would reflect a unique company like Tiffany & Co. My inspiration was derived from Tiffany's popular display windows, where they would display their jewelery in a creative setup. Hence I used the Japanese cranes as symbolic animal for peace, the elegance, and the love
    that transpires from this beautiful bird.</p>

    <figure><img src="images/proj1.jpg" alt="Inceotion Dvd Jewel Cover"></figure>

    </article>

    CSS
    .wrapper {
    padding: 18% 2% 7%;
    background-color: #FFF;
    }

    .wrapper h2{
    border-bottom: 1px solid #000;
    }

    .artwork {
    /* clear: both;
    */ background-color:#0C0;
    margin-top: 5%;
    margin-bottom: 5%;
    overflow: hidden;
    }

    .artwork h3 {
    /* margin-top: 5%;
    */ padding: .2% 0;
    width: 15%;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 1em;
    background-color: #CB285D;
    color: #fff;
    }

    .artwork h4 {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 1.25em;
    }

    .artwork p {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 1em;
    background-color: #F90;
    color: #707070;
    padding-right: 70%;
    text-align:justify;
    }

    .artwork figure {
    float: right;
    margin-top: -26%;
    width: 65%;
    }

  2. #2
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try:

    • Making the project image or its container float: right (put this before the description text)
    • Making the project image or its container position: absolute and use top:0, right:0 or as appropriate


Bookmarks

Posting Permissions

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