diaco diaco - 2 months ago 8
CSS Question

HTML/CSS Responsive Grid

I am pretty new to the responsive grid concept in HTML/CSS. I am trying to design a webpage using this concept. for the header I have a picture and some text.

<header class="section group">
<div class="section group">
<div class="picture col span_1_of_4">
<a href="index.html"><img class="headimg" alt="shoo" src="shoo.png"></a>
</div>
<div class="header-text col span_1_of_4">
<p>Hi and welcome to the Tasty Recipies website!</p>
</div>
</div>
</header>


Now to my question, I want to implement the webpage to use the first and last column of the span. So, on a regular resolution screen, I want the picture to be on the far left, and the text on the far right.

On a smaller screen where only 2 columns fit, I want them next to each other, and on an even smaller screen, I want them below each other.

Any suggestions?

EDIT:

div.picture{
background-color: #4A96AD;
float: left;
height:100%;
border-right:3px solid #7D1935;
}

/*CSS FILE*/
div.header-text{
font-weight:bold;
text-align:right;
}

Answer

With your code here on SO, floating works fine:

https://jsfiddle.net/zkzjsgxr/1/

div.picture{
    background-color: #4A96AD;
    float: left;
    height:100%;
    border-right:3px solid #7D1935;
}

/*CSS FILE*/
div.header-text{
    font-weight:bold;
    float:right;
}
Comments