WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS to group 1 tall image next to 4 square images in 2x2 group (3 posts)

  1. roadie
    Member
    Posted 4 years ago #

    Hi everyone,

    I am trying to work out the css for the following:

    I want to position a rectangular image 2 units tall and 1 unit wide with on its right 4 square images 1 unit by 1 unit arranged in 2 rows and 2 columns. It should look something like this:
    Intended

    I have some css code:

    /*
    */
    
    body, h1, h2, h3, h4, h5, h6, form, ol, p, ul{
    	margin: 0;
    	padding: 0;
    }
    
    body{
    	background: #2b2b2b;
    }
    
    #header{
    	clear: both;
    	width: 500px;
    	background: #fff;
    	text-align: center;
    	vertical-align: middle;
    	color: #333;
    }
    
    #aboutheader{
    	display: block;
    	//clear: both;
    	//float: left;
    	width: 100%;
    	background: #dff;
    	vertical-align: top;
    	color: #333;
    }
    #aboutsubheader1{
    	display: inline;
    	width: 33%;
    	background: #fdd;
    	vertical-align: top;
    	color: #333;
    }
    #aboutsubheader2{
    	display: inline;
    	width: 66%;
    	background: #ddf;
    	//text-align: left;
    	vertical-align: top;
    	color: #333;
    }
    #aboutheader img, #aboutsubheader1 img, #aboutsubheader2 img{
    	display: inline;
    	border-top: 2px solid #006;
    	vertical-align: top;
    }

    and a test html file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    	<link rel="stylesheet" href="http://localhost/test2.css" type="text/css" media="screen" />
    
    </head>
    
    <body>
    
    <div id="header">
    
    <div id="aboutheader"><div id="aboutsubheader1"><img src="http://localhost/wordpress/wp-content/themes/neo-sapien-dev/images/TipHowtoCollectX.gif" width="128" height="256" alt="Tip" /></div><div id="aboutsubheader2"><img src="http://localhost/wordpress/wp-content/themes/neo-sapien-dev/images/ButOneWordX.gif" width="128" height="128" alt="But" /><img src="http://localhost/wordpress/wp-content/themes/neo-sapien-dev/images/BackX.gif" width="128" height="128" alt="Back" /><img src="http://localhost/wordpress/wp-content/themes/neo-sapien-dev/images/AndCheckYourInsX.gif" width="128" height="128" alt="Check" /><img src="http://localhost/wordpress/wp-content/themes/neo-sapien-dev/images/EthicalIssuesinRoadsignsX.gif" width="128" height="128" alt="Ethical" /></div></div>
    
    </div>
    
    </body>
    
    </html>

    This however produces the following:
    Screenshot

    Changing display from inline to block, groups the four squares together but puts them under the first image. I have tried various combinations of display, clear and float but with no luck.

    I am reluctant to use relative positioning - this has to fit with stuff above and below it and then with nav columns left and right of it all. Similarly using photoshop to glue all the gifs together and then doing a map, is a last resort.

    Is there a way of doing this in css?

  2. chinmoy
    Member
    Posted 4 years ago #

    #aboutheader{
    	display: block;
    	clear: both;
    	width: 100%;
    	background: #dff;
    	vertical-align: top;
    	color: #333;
    }
    #aboutsubheader1{
    	display: inline;
    	width: 33%;
            float: left;
    	background: #fdd;
    	vertical-align: top;
    	color: #333;
    }
    #aboutsubheader2{
    	display: inline;
    	width: 60%;
            float: right
    	background: #ddf;
    	//text-align: left;
    	vertical-align: top;
    	color: #333;
    }
  3. roadie
    Member
    Posted 4 years ago #

    Thanks, that almost does it, but I was trying to keep the left image touching the right four and the group of five centered in #header.

    These changes to your code do it, but I wonder if there is anything more elegant:

    #aboutheader{
    	display: block;
    	clear: both;
    	width: 384px;
    	background: #dff;
    	margin: 0px 0px 0px 58px;
    	//text-align: center;
    	vertical-align: top;
    	color: #333;
    }
    #aboutsubheader1{
    	display: inline;
    	width: 33%;
            float: left;
    	background: #fdd;
    	vertical-align: top;
    	color: #333;
    }
    #aboutsubheader2{
    	display: inline;
    	width: 66%;
            float: right
    	background: #ddf;
    	vertical-align: top;
    	color: #333;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic