Two 'boxes' under one another and another on the right

Question

please click for updated imageCurrently, my webpage looks like this:

But I want the bottom box to fit right under the top one while keeping the box on the right in the same place.

This is what i have now

#intro-chemistry{
    background-color: #C7C7C7;
    border-top: 7px solid rgb(177, 177, 177);
    width: 242px;
    height: 103px;
    padding: 13.75px;
    margin: 13.75px 13.75px;
    text-align: left;
    float: left;
}

#intro-physics{
    background-color: #C7C7C7;
    border-top: 7px solid rgb(177, 177, 177);
    width: 238px;
    height: 285px;
    padding: 13.75px;
    margin: 13.75px 13.75px;
    text-align: 10, 10, 10, 10;
    float: left;
}

#intro-classic{
    background-color: #C7C7C7;
    border-top: 7px solid rgb(177, 177, 177);
    width: 242px;
    height: 103px;
    padding: 13.75px;
    margin: 13.75px 13.75px;
    text-align: left;
    float: left;
}

I'm trying to get the box "classic" to fit right under the box "chemistry' whilst the box 'physics' stays put.

Put both ''chemistry' and 'classic' in a div and give float left. — Anoop John, Apr 21 '16 at 06:27
IT WOULD APPEAR THAT YOUR CAPS LOCK KEY GOT STUCK. PLEASE USE THE "EDIT" LINK TO FIX THAT. — T.J. Crowder, Apr 21 '16 at 06:30

Anoop John · Answer 1 · 2016-04-21T07:18:03.993

2

You have to change your HTML structure.

HTML

<div class="col-left">
  <div id="intro-chemistry">
    Chemistry
  </div>
  <div id="intro-classic">
    Classic
  </div>
</div>

<div class="col-right">
  <div id="intro-physics">
    Physics 
  </div>
</div>

CSS

.col-left{
  float: left;
  width: 242px;
}
.col-right{
  float: right;
}

edited Apr 21 '16 at 07:18

answered Apr 21 '16 at 06:35

Anoop John

464
3
8

this only seems to push it further to the right whilst the one below stays underneath the one on the right – Claire-Ellen Apr 21 '16 at 07:13
I also have a column to the right which might be why its not working, i've edited the top post with a picture of it overall, under - "please click for updated image" – Claire-Ellen Apr 21 '16 at 07:16
I have updated the code. Here is the fiddle https://jsfiddle.net/gph4w93k/ – Anoop John Apr 21 '16 at 07:18
unfortuantely still having same issue :( :( – Claire-Ellen Apr 21 '16 at 07:34
Can you provide a fiddle? – Anoop John Apr 21 '16 at 07:35
https://jsfiddle.net/clairellend/n5b4vv8o/1/ this is of the whole thing now that i've taken out the structure you made and what it looks like. the 'bike classic' box is sitting on top of the two below it and just needs to be somehow pushed up – Claire-Ellen Apr 21 '16 at 07:45
Your html code is so messed up. Some of the tags are not even closed. – Anoop John Apr 21 '16 at 07:48
yes its my first time coding, thankyou. hence why i'm on here for help. – Claire-Ellen Apr 21 '16 at 07:51
StackOverflow is for answering specific technical questions on a well formed problem, so that others can benefit from understanding the answer. It's not a general tutorial site or a way of getting others' opinions on how to do something. Thanks! :) – Anoop John Apr 21 '16 at 07:55
cheers bud :) :) :) :) – Claire-Ellen Apr 21 '16 at 07:57

Two 'boxes' under one another and another on the right

1 Answers1