CODEWITHSUNDEEP
htmlcss
bondimedical
bondimedical

Reputation: 201

CSS - Second column content dropping into first

I am using the following CSS for 2 columns of content and when the device width reaches 600px the second column drops under the first. However, the contents of the second column are longer than the first and the end of the content starts to drop into the first column regardless of the device width. How can I prevent this?

.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
 width: 100%;
}
}

EDIT: Here is the HTML code:

    <div class="row">
  <div class="column">
    <p><b>Company Name:</b></p>
    <p>Eigner Web Pty Ltd</p>
    <p><b>Address:</b></p>
    5/68 Gould St<br> Bondi Beach<br> New South Wales 2026<br> Australia
    <br>
    <br>
  </div>
  <div class="column">
    <p><b>Phone:</b></p>
  </div>
  <p><a href="tel:1300-935-470">1300 935 470</a>&nbsp;within Australia<br>
    <a href="tel:+61-2-9365-3490">+61 2 9365 3490</a>&nbsp;International</p>
  <p><b>Fax:</b></p>
  <p>1300 859 741 within Australia</p>
  <p><b>Email:</b></p>
  <p>sales at seoace.com.au<br> (Replace the word at with @)</p>
</div>

Upvotes: 0

Views: 59

Answers (2)

kewlashu
kewlashu

Reputation: 1109

Try changing below:

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

to:

@media screen and (max-width: 600px) {
.column {
   width: 100%;
   float:none;
   clear:both;
 }
}

Here is a working sample:

.column {
  float: left;
  width: 50%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    float: none;
    clear: both;
  }
}
<div class="row">
  <div class="column">
    <p><b>Company Name:</b></p>
    <p>Eigner Web Pty Ltd</p>
    <p><b>Address:</b></p>
    5/68 Gould St<br> Bondi Beach<br> New South Wales 2026<br> Australia
    <br>
    <br>
  </div>
  <div class="column">
    <p><b>Phone:</b></p>      
  <p><a href="tel:1300-935-470">1300 935 470</a>&nbsp;within Australia<br>
    <a href="tel:+61-2-9365-3490">+61 2 9365 3490</a>&nbsp;International</p>
  <p><b>Fax:</b></p>
  <p>1300 859 741 within Australia</p>
  <p><b>Email:</b></p>
  <p>sales at seoace.com.au<br> (Replace the word at with @)</p>
  </div>
</div>

Also I think in question's html the second column is closing at wrong place.

Upvotes: 1

Cole Arseneau
Cole Arseneau

Reputation: 104

I would suggest looking into FlexBox and doing something like this. Here is a rough example with the code you provided. I believe I made it in the way you asked, if not let me know and I will look at it again and readjust it.

.column {
  float: left;
  width: 50%;
  display: flex;
  flex-direction: column;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: flex;
  flex-direction: row;
  clear: both;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
<div class="row">
  <div class="column">
    <p><b>Company Name:</b></p>
    <p>Eigner Web Pty Ltd</p>
    <p><b>Address:</b></p>
    5/68 Gould St<br> Bondi Beach<br> New South Wales 2026<br> Australia
    <br>
    <br>
  </div>
  <div class="column">
    <p><b>Phone:</b></p>
  </div>
  <p><a href="tel:1300-935-470">1300 935 470</a>&nbsp;within Australia<br>
    <a href="tel:+61-2-9365-3490">+61 2 9365 3490</a>&nbsp;International</p>
  <p><b>Fax:</b></p>
  <p>1300 859 741 within Australia</p>
  <p><b>Email:</b></p>
  <p>sales at seoace.com.au<br> (Replace the word at with @)</p>
</div>

Upvotes: 1

Related Questions