How to align div elements while using css tables


Tags: html,css

Problem :

I need to align my div elements such that the first column element takes up two rows and the second column elements occupy the first and the second row,and are stacked one below the other using css tables.

My html

<html>
<head><link rel="stylesheet" type="text/css" href="core.css"></head>
<body>
<div id="wrapper">
  <div class="specialsticky">
    <img src="Hydrangeas.jpg" alt="first image">  
  </div>

  <div class="specialsticky">
    <img src="Chrysanthemum.jpg" alt="second image"> 
  </div>

  <div class="specialsticky">
    <img src="Desert.jpg" alt="third image">
  </div>
</div>
</body>
</html>

and this is the css part

#wrapper {
display:table;
width:1024px;}

div.specialsticky:nth-child(1){
display: table-cell; border: 1px solid black; vertical-align: middle;
width:604px;height:447px;}

div.specialsticky:nth-child(1) img{
width: 604px;height:447px;}

div.specialsticky:nth-child(2){
display: table-cell; }

div.specialsticky:nth-child(2) img{ width: 424px;height:222px;}

div.specialsticky:nth-child(3){display: table-cell;}

div.specialsticky:nth-child(3) img{width: 424px;height:222px;}


Solution :

As the divs are contained in the wrapper, you could remove display: table-cell on the two small divs so they naturally collapse underneath each other but inline with the larger div.

Have an example!

CSS

#wrapper {
display:table;
width:1024px;
font-size: 0; /* fix inline gap */
margin: 0 auto;
}

div.specialsticky:nth-child(1) {
display:table-cell;
border:1px solid #000;
vertical-align:middle;
width:604px;
height:447px;
}

div.specialsticky:nth-child(1) img {
width:604px;
height:447px;
}

div.specialsticky:nth-child(2) img,div.specialsticky:nth-child(3) img {
width:424px;
height:222px;
}

    CSS Howto..

    Formatting text, Suggestions with how-to?

    How to get jQuery to recognize mouse over image once per hover

    Hide Show content-list with only CSS, no javascript used

    How to Create paragraph first letter uppercase in html & css (in special format)

    How to make a CSS menu from raw HTML code

    Coding the slideshow

    how to make this gradient vertical

    how to use bootstrap's modal dialog only, instead of the whole bootstrap.css to aviod conflicting with my own css

    How to hyperlink a css box [closed]

    How do you deal with the designing issues of a website?

    How to Tie Events to CSS

    How to adapt height of an element to another in CSS

    How to make a full page header?

    How do I create a clickable button or link inside an tag and still be right-clickable?

    How do you scroll the page content over a cover image (like medium.com)?

    CSS how to deal with a lot of sprite without having to create a new css class

    How to remove blue border around the button in Firefox?

    How to give different content to every td in the table

    How to make a list of “background-image” CSS using WebDriver with Java

    How to escape quotes in Less variable which stores a color name?

    How to center align circles?

    How to set line spacing of an ordered list consistently across browsers?

    How to make a CSS rule which applied on a div affect another div?

    How to add Print headers and footers in HTML, CSS and JavaScript?

    C# How to base64 encode background gradient

    How do i use floats for images while using
    so that
    still shows under image?

    How to modify CSS via JQuery

    How to bring DIV2 to top WRT DIV1?

    How come my