CSS to group 1 tall image next to 4 square images in 2×2 group

  • Resolved roadie

    (@roadie)


    13 years, 9 months 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?

Viewing 2 replies - 1 through 2 (of 2 total)
  • chinmoy29

    (@chinmoy)

    13 years, 9 months 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;
}
    Thread Starter roadie

    (@roadie)

    13 years, 9 months 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;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS to group 1 tall image next to 4 square images in 2×2 group’ is closed to new replies.