not splitting div's properly - css

Question

This has probably been posted before, but I couldn't find a solution from searching. I'm new to HTML and CSS just started ~1 week ago, so if there is a solution an explanation would go a long way rather than modified code/solution.
So I am attempting to split a div into essentially two columns one of 25% width and the other 75% width. I haven't started doing the CSS yet hence why the styling is inline at the moment. The general div of 100% width displays fine now when I try to split this into two inner div's it seems to work the list i am trying to create displays correctly however the next column of 75% appears below the div. Why is this and is there anyway to fix it.
<div style="width:100%;background:orange">
<div style = "text-align:center;width:25%;background-color:red;">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div style="width:75%;background:purple;">
dsfsdf
</div>
</div>

Answer 1

To make <div>s align next to each other they need to float.
CSS:
.container {
background-color: orange;
width:100%;
}
.leftColumn {
float:left;
background-color: red;
width:25%;
margin:0;
}
.rightColumn {
float:right;
background-color: purple;
width:75%;
margin:0;
}
.clear {
clear:both;
}
HTML:
<div class="container">
<div class="leftColumn">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div class="rightColumn">
dsfsdf
</div>
<div class="clear"></div>
</div>
<div>Next content</div>
To continue with your code below you need an element that clears the floating.
Fiddle: http://jsfiddle.net/o7pd2fLf/2/

Answer 2

Create like this your html and css:
.orange-div{
width:100%;
background:orange;
float: left;
}
.red-div{
text-align:center;
width:25%;
background-color:red;
float: left;
}
.purple-div{
width:75%;
background:purple;
}
<div class="orange-div">
<div class="red-div">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div class="purple-div">
dsfsdf
</div>
</div>

Answer 3

add style float:left to both the div with width 25% and 75% and run your code
add <div style="clear:both"></div>

Answer 4

You should do these things with Flexbox. If you're new, don't learn to use float for layout. Flexbox is made for this.
And use classes:
.container {
display: flex; /* makes container a flex parent and all its children flex children */
}
.left,
.right {
flex: 1; /* give 1 'part' of total width */
}
.right {
flex: 3; /* give 3 'parts' of total width */
}
Example: http://jsfiddle.net/rudiedirkx/tuojmn3g/
The flex property is very cool. If you give both children flex: 1, all children will be equal size: 50% (because 1 : 1). If you then give 1 of the children flex: 3, it will be 3x as big as the other (because 1 : 3). This gives you immense flexibility.
Flexbox is complicated but it's very well worth it to learn.
And a Flexbox bonus: equal height columns for free!