www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Adaptive grid layout using display: inline

Hybrid View

  1. #1
    Join Date
    Feb 2005
    Location
    Norwich, UK
    Posts
    140

    resolved [RESOLVED] Adaptive grid layout using display: inline

    Hi,
    I'm just getting my head round dynamic layout for the first time, having coded fixed-sized sites up until now.

    I want to have a neat grid of items (each will be a square image link with a caption on top) that display neatly in a horizontal line (ideally centred on the screen), which then wrap and start placing elements below when the screen gets smaller (so will appear in a column on a phone)

    Will I need to use some jQuery grid plugin for this? Most seem to aim at grid that support dynamically sizing content, but I'm happy for my containers to be fixed size.

    I've tried starting the elements off with html like this:
    Code:
    <div class="sq_link_box">
    <div class="sq_link_img"><img src="images/practice/news/01-p.jpg></div>
    <div class="sq_link_text">Text 01</div>
    </div>
    <div class="sq_link_box">
    <div class="sq_link_img"><img src="images/practice/news/02-p.jpg></div>
    <div class="sq_link_text">Text 02</div>
    </div>
    <div class="sq_link_box">
    <div class="sq_link_img"><img src="images/practice/news/03-p.jpg></div>
    <div class="sq_link_text">Text 03</div>
    </div>
    Then my CSS is this:
    Code:
    .sq_link_box {
    	display: inline;
    	margin: 1em;
    	background: #AAA;
    	width: 300px;
    	height: 300px;
    	position: relative;
    }
    
    .sq_link_img {
    	margin: 0;
    	z-index: 1;
    }
    
    .sq_link_text {
    	width: 280px;
    	height: 30px;
    	top: -50px;
    	background: #272727;
    	color: #fff;
    	position: relative;
    	z-index: 2;
    	padding: 10px;
    }
    For some reason, they all appear in a column from the start, even though I've specified 'inline' for the container element. Any ideas why it's not working? And if there's a simple way of achieving this? Any help gratefully received!!

    Thanks,

    Derek

  2. #2
    Join Date
    Feb 2005
    Location
    Norwich, UK
    Posts
    140
    Got it - using
    Code:
    float: left;
    was the key.

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