• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 34
  • Last Modified:

Div layout with a table.

Right now I have a table like this with a red border and a width of 700px.
Inside that table on one row, one of the columm tds has a border of green and the other td in that row has a blue border.
Inside the td with the green border I have a table with a width of 350px.
Inside the td with the blue border I have just regular text

p1.PNG
I want to replace the table with a red border with a div.
Then inside that red div I went to have a div with a green border and a div with a blue border right next to it.
Then inside the div with the green border I want to place the table with a width of 350px.

So when i resize the width of the div with the red border, only the width of the div with blue border should resize.
The width of the div with the green border shouldn't resize,because it has the table with the black border in it.

What's the best way to achieve this with CSS?
0
maqskywalker
Asked:
maqskywalker
  • 2
1 Solution
 
Julian HansenCommented:
You can use flex to do this
CSS
.flexbox {
	display: flex;
	flex-direction: row;
}
.col {
	width: 100%;
}
.redborder {
	border: 1px solid red;
	padding: 5px;
}
.greenborder {
	border: 1px solid green;
	padding: 5px;
}
.blueborder {
	border: 1px solid blue;
	padding: 5px;
}
table {
	width: 100%;
	border-collapse: collapse;
}

Open in new window

HTML
<div class="flexbox redborder">
  <div class="col greenborder" style="width: 350px">
    <table>
      <tr>
        <td>Table here</td>
      </tr>
    </table>
  </div>
  <div class="col blueborder">This is regular text</div>
</div>

Open in new window

Working sample here
1
 
maqskywalkerAuthor Commented:
Cool. Thanks.
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now