Photoshop Question posted in
The official user guide can be found here.

Why is CSS not positioning correctly? – Photoshop

I have designed picture 1 in PhotoShop which is what I was planning in the HTML.

I added the float to all elements but for some reason I don’t understand it starts breaking the divs (picture 2)… am I missing something obvious here?

[![enter image description here][1]][1] 
<div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
    <div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
        <a href="/Main/">
            <img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86" />
        </a>
    </div>

    <div style="float:right;margin-top:10px;border: 1px solid black;">
        <img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42" />
    </div>

    <div style="clear:both;"></div>

    <div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
        <img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496" />
    </div>

    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
        <img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114" />
    </div>

    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
        <img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png" />
    </div>

    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">

        <img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" />
    </div>


    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
        <img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png" />
    </div>

    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">

        <img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" />
    </div>



</div>
Tags:

2

Answers


  1. 0

    You have way too many divs, and you gotta adjust the margins/paddings.
    Take a look at This link..

    Login or Signup to reply.
  2. 0

    The alignment is off because of the size of Read From First Page and Jump To Last Page images. Giving width to the images will place it to the side of left container.

    Also use display:inline-block with vertical-align:middle to align the container vertically into middle.

    Here is the link that explains the use of display:inline-block

    http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

    Have modified your html code

    <div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
    <div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
    <a href="/Main/">
        <img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86">
    </a>
    </div>

    <div style="float:right;margin-top:10px;border: 1px solid black;">
    <img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42">
    </div>

    <div style="clear:both;"></div>

    <div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
    <img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496">
    </div>

    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
    <img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114">
    </div>

    <div style="margin-top:0px;margin-left:30px;border: 1px solid black;display: inline-block;vertical-align: middle;">
    <img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png">
    </div>

    <div style="margin-top:0px;margin-left:30px;border: 1px solid black;height: 100%;display: inline-block;">

    <img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" style="
    width: 230px;">
    </div>


    <div style="display: inline-block;margin-left:30px;border: 1px solid black;vertical-align: middle;">
    <img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png">
    </div>

    <div style="display: inline-block;margin-top:0px;margin-left:30px;border: 1px solid black;">

    <img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" style="
    width: 230px;">
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search