CODEWITHSUNDEEP
htmlcssresponsive
Diaco
Diaco

Reputation: 251

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;
}

Upvotes: 1

Views: 287

Answers (2)

Grimlorn
Grimlorn

Reputation: 152

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;
}

Upvotes: 2

Sergio Tx
Sergio Tx

Reputation: 3856

Working with 3 examples simulating sizes:

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

div.header-text{
    font-weight:bold;
    text-align:right;
  width: 40px;
}

.float-right{
  float: right;
}

.float-left{
  float: left;
}

div.section{
clear: both;
  }

/* don't copy this css, just examples*/
div.section:nth-of-type(1){
width: 400px;
  margin: 0 auto;
  }
div.section:nth-of-type(2){
width: 90px;
  margin: 0 auto;
  }
div.section:nth-of-type(3){
width: 50px;
  margin: 0 auto;
  }
<header class="section group">
    <div class="section group">
        <div class="picture col span_1_of_4 float-left">
            div1
        </div>
        <div class="header-text col span_1_of_4 float-right">
             div2
        </div>
    </div>
  <div class="section group">
        <div class="picture col span_1_of_4 float-left">
            div1
        </div>
        <div class="header-text col span_1_of_4 float-right">
             div2
        </div>
    </div>
  <div class="section group">
        <div class="picture col span_1_of_4 float-left">
            div1
        </div>
        <div class="header-text col span_1_of_4 float-right">
             div2
        </div>
    </div>
</header>

For the smallest one, I would use mediaqueries if you don't like the effect.

Upvotes: 2

Related Questions