CODEWITHSUNDEEP
htmlcss
Nosheen
Nosheen

Reputation: 135

Making table in html with different column height based on the length of data

I am having an issue here. How can I make a table in html with two different column heights depending on the length of data in it. Can I use div for this purpose? I want the layout to move from top to bottom instead of left to right.I am attaching the images as an example.

enter image description here

enter image description here

Thank You in advance.

Upvotes: 0

Views: 127

Answers (2)

Abrar Pathan
Abrar Pathan

Reputation: 66

Please use following HTML code for the same 

<style type="text/css">

.main-cont{
  float: left;
  width: 100%;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  color: #999999;
  font-size: 12px;
}
.left-cont{
  float: left;
  width: 49%;
  padding-right: 1%;
}
.right-cont{
  float: left;
  width: 50%;
}

</style>


<div class="main-cont">
<div class="left-cont">
Burgers<br>
 mode with premium angus beef:  substitute grilled chicken breast or block-bean veggie burger
 <br><br>
Classic Burger $7.95 Our not-so-basic burger topped with lettuce: tomato and shoved red onions
 <br><br>
Hickory Burger $8.95 Cheddar cheese. hickory-smoked bacon and smoky barbecue sauce
 <br><br>

</div>
<div class="right-cont">
Hot Dogs premium Vienna beef hot dogs: substitute TofuPup for no charge   <br><br>
Chicago Style $3.75 Topped with yellow mustard: green relish: onions: tomatoes: pickles: sport peppers and celery salt <br><br>
Sonoran Dog $4.50 Wrapped in bacon and grilled: topped with tomatoes: onions, cotijo cheese, pinto beans, and hot sauce  <br><br>

</div>

</div>

Upvotes: 0

Leo the lion
Leo the lion

Reputation: 3065

To achieve your target, you can make 2 div in one parent div and then use fix width as you want dynamic height. M giving border to show you the height for different different div according to their content.

Also don't forget to use clear:both after using Float or else there will be white space.

See here you can change the div structure according to your need :)

Upvotes: 1

Related Questions