For my main content, I had two divs – left and right. I’ve used the new css properties:aside and article, but I also used normal divs to construct this.

Here is the html and css involved with this section of my website.

I set left to indicate what I wanted on the left of the container – simple 2 column layout.

<div id=”left”>

New html5 tag. Each of the divs in the left div follows the same suit. They either contain an image, some text, or alternating text/images depending on the media query (I will discuss these in another post)

<aside>
<p>TEXT</p>
<br>

</aside>

<div id=”aside2″>

I’ve given all of the images a class: ‘imgsize’. This is to save adding height and width attributes until the css, as if I add values here, they won’t be responsive, and if I add responsive values such as 100% or auto, they will not validate and will not be read by IE (surprise surprise).

<img class=”imgsize” src=”images/car1.jpg” alt=”car”/>

</div>

<div id=”aside3″>

<p>TEXT</p>
<br>

I’ve added a link here which links this content to the location page. I’ve deleted the content for this post simply to make it easier to read.

<p>TEXT<a href=”location.html”><strong>here</strong></a>TEXT.</p>

</div>

<div id=”aside4″>

<img class=”imgsize” src=”images/map2.jpg” alt=”map preview”/>

</div>

</div>

These are the divs that will be appearing on the right side of the container.

<div id=”right”>

<div id=”article1″>

This image has two classes. ‘imgsize’ for the size of the image, and ‘norm’ to denote what will be displayed on a normal screen (pc, laptop)

<img class=”norm imgsize” src=”images/car6.jpg” alt=”car”/>

Here the text has a class, ‘tab’. This means that when the browser is tablet size, it will show this instead of the image. This will be easier explained in a post dedicated to media queries which I will do once I finish them all.

<p class=”tab”>TEXT</p>

This text also has a class called ‘toosmall’. This will be in the tablet media query as display:none; as the dimensions of the box will not allow all of the text and I cannot afford to make it taller without compromising the rest of the divs.
<p class=”tab toosmall”>MORE<a href=”events.html”><strong>here</strong></a></p>

</div>

<div id=”article2″>

<p class=”norm”>TEXT</p>
<br>
<p class=”norm”>MORE <a href=”events.html”><strong>here</strong></a></p>

<img class=”tab imgsize” src=”images/car6_2.jpg” alt=”car”/>

</div>

<div id=”article3″>

<img class=”norm imgsize” src=”images/car2.jpg” alt=”car”/>
<img class=”tab imgsize” src=”images/car2_2.jpg” alt=”car”/>

</div>

<div id=”article4″>

<p>TEXT</p>
<br>
<p class=”toosmall”>MORE<a href=”events.html”><strong>here</strong></a></p>

</div>
</div>

Here is the css related to these divs:

The max width for the left div is set at 480px so that it never gets to more than half of the size of the container. It’s floated to the left to keep it on the left side, and the height is set at auto, as It will assume the height of the 4 divs inside it on top of each other.

#left{
max-width:480px;
width:50%;
float:left;
text-align:left;
height:auto;
}

This is the top left div. I’ve set it’s height at 260 to accomodate the heights of the text when it shrinks but bigger than 720px. All 4 divs in the left div will be floated to the left. There is a 2px border around each div, and the box sizing attributes define that this and the padding will be inside the div. I’ve set the background as a yellow colour to keep with the theme of the website. There is also a 20px border radius on the top left of this specific div as it will be the top one on the left.

aside{
max-width:480px;
width: 100%; /* 440 (originally 480) / 480 */
height:260px;
float:left;
border: 2px;
border-style:solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:3.75%;
background-color:#FF9;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
}

This div is styled exactly the same as the one above, which puts it underneath it due to the html coding. The only difference is that there is no border radius at all, and the height is set to auto as there will be an image in here. Also, the background colour is black instead of yellow. I wanted to give a chequered flag effect with these divs, so the image contained divs will have a black padding around them.

#aside2{
max-width:480px;
width:100%; /* 440 (originally 480) / 480 */
height:auto;
float:left;
background-color:#000;
border:2px;
border-style:solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:3.75%;
}

Again this is exactly the same as the last one, but as this will have text and be the third div down it has a height value of 260px defined, and the background colour is back to yellow.

#aside3{
max-width:480px;
width: 100%; /* 440 (originally 480) / 480 */
height:260px;
float:left;
border: 2px;
border-style:solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:3.75%;
background-color:#FF9;
}

Essentially this is exactly the same as #aside2, except this has a bottom left border radius of 20px giving it a curved bottom left edge. I’ve also included the margin-bottom:30px to push down the div below it.

#aside4{
max-width:480px;
width: 100%; /* 440 (originally 480) / 480 */
height:auto;
float:left;
border: 2px;
border-style:solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
padding:3.75%;
background-color:#000;
margin-bottom:30px;
}

For all of the elements with the ‘tab’ class, this means that they will not be visible yet.

.tab{
display:none;
}

This div is set up exactly the same as the left, except that it is aligned and floated to the left.

#right{
max-width:480px;
width:50%;
float:right;
text-align:left;
height:auto;
}

All of the article divs are set up in the same way as the aside divs. The border is the same, but on this specific div there is a border radius of 20px on the top right for the curved edge. It is also floated to the right to keep it on the right. The background on this is black as it has a picture in it.

 #article1{

max-width:480px;
width:100%; /* 440 (originally 480) / 480 */
height:auto;
float:right;
background-color:#000;
border:2px;
border-style:solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:3.75%;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
clear:right;
}

This is the same as #article1, but without the border radius, the height is defined as 260px and a yellow background instead of black.

#article2{
max-width:480px;
width:100%; /* 440 (originally 480) / 480 */
height:260px;
float:right;
background-color:#FF9;
border:2px;
border-style:solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:3.75%;
clear:right;
}

This is exactly the same as #article2 but with a black background instead of yellow and height set at auto.

#article3{
max-width:480px;
width:100%; /* 440 (originally 480) / 480 */
height:auto;
float:right;
background-color:#000;
border:2px;
border-style:solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:3.75%;
clear:right;
}

This div is exactly the same as #article2, only this has a border radius on the bottom right of 20px to give it  curved edge. These together round off all 8 divs with curved edges around the very outside of the cluster.

#article4{
max-width:480px;
width:100%; /* 440 (originally 480) / 480 */
height:260px;
float:right;
background-color:#FF9;
border:2px;
border-style:solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
padding:3.75%;
clear:right;
}

Here is a picture of the divs with all of the text and images in place

:contentdivs

Advertisements