HTML/CSS Responsive Grid

Question

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

if u mean div.header-text{float:right}, then it doesnt work for me. — Diaco
– Diaco, Commented Sep 8, 2016 at 15:01

Grimlorn · Accepted Answer · 2016-09-08 15:08:44Z

2

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

answered Sep 8, 2016 at 15:08

Grimlorn

1521 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Diaco Over a year ago

.... So I have been changing the index.html file, but been checking another page for the confirmation. Upon opening my index.html page, all was fine.

Sergio Tx · Accepted Answer · 2016-09-08 15:08:00Z

2

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.

answered Sep 8, 2016 at 15:08

Sergio Tx

3,9381 gold badge20 silver badges29 bronze badges

1 Comment

Diaco Over a year ago

Thank you. Appearently everything was working, but I had been looking on the wrong .html page :)

Collectives™ on Stack Overflow

HTML/CSS Responsive Grid

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related