full-width two columns html [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to make 2 full width columns in one box. first column has width: auto and I want second column in 100% minus first column's width, so they can display inline. could someone help me, please?

Answer 1

UPDATED
checkout this fiddle:
http://jsfiddle.net/cvxr31xo/2/
<div id="major">
<div id="one">Hello</div>
<div id="two">World</div>
</div>
#major {
width: 100%;
border: 1px solid black;
}
#one {
width: auto;
float: left;
background-color: green;
height: 100px;
}
#two {
width:auto;
min-width:100%;
background-color: blue;
height: 100px;
}
if you need additional features let me know I will update

Answer 2

I'm not sure if you're after Table or straight DIVs for this.
<div style="width:100%; border:1px solid red;">
<div style="display: inline; border: 1px solid black;">Some content</div>
<div style="display: inline; border: 1px solid black;">Some more content</div>
</div>
The second div inside the box div isn't 100% wide, but both divs will expand to content, if that's what you're after...

Answer 3

To achieve this I think you either have to use a table, or mimic one.
Table:
<table style="width: 100%">
<td>col1</td>
<td>col2</td>
</table>
Divs
<div style="width: 100; display: table">
<div style="display: table-cell">col1</div>
<div style="display: table-cell">col2</div>
</div>
Both solutions should make the columns add up to 100% and have automatic widths for both columns. The browser will assign width to them as it sees fit, depending on their contents, so it won't actually first size column 1 independently and then assign column 2 the remaining space, but will find the "best compromise" for both columns.
Edit: The float based solution of #Charlie is actually better in a sense, as it does size the left column independently. However, if the left columns grows too big, the layout may break.

Answer 4

To achieve what you want, #Charlie answered very well, perfect answer. https://stackoverflow.com/a/26757381/3964593
I dont know if you want make it dynamically, or what goal are you trying to achiev, but, still, if the content of one div goes bigger than the other, you should be prepared to handle it.
Like making sure you put a max-width for one or both divs, setting the right amount of height px's or percents, etc. to make it behave right.

Answer 5

try this code.....
<div style="width:100%;">
<div style="float:left; width:49.7%; border: 1px solid black;">Some content </div>
<div style=" float:right; width:49.6%; border: 1px solid black;">Some more content </div>
</div>