How to get this div with floats responsive? - html

Question

I made an small html field and now I'm trying to get it responsive.
To make it clear, I made an picture how the fields should move when it's displayed on a smaller screen.
How it should be
After figuring out a few hours I got this solution, whichs works fine on the Desktop but not on a smaller screen. The Logo is not moving to the top but remains on the left side.
Can someone help me with this?
Here is the code:
<div style="background-color: orange; color: white; width: 30%; padding: 4px 4px; text-align: center; margin:0">Stackoverflow</div>
<div style="background-color: #f9f9f9; border: 2px solid orange; max-width:800px; overflow: auto;">
<div style="float: left;width: 30%; overflow: auto;"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7A3wAuudoXw8butMA-wxJdWYdUlNbWjC6EOV3iXnrUf08dwX3PA" /></div>
<div style="float:left;width:70%">
<div style="text-align: center; font-size: 12pt; background-color:lightgreen">Some Informations
</div>
<div>
<div style="float: left; background-color: lightblue; width:50%">
<ul>
<li>Owner: Stack Exchange, Inc.</li>
<li>Available in: Englisch, Spanisch, Russian, Portuguese ...</li>
<li>Type of site: Knowledge markets</li>
</ul>
</div>
<div style="float: right; background-color: lightgrey; width:50%; padding:5px">
<ul>
<li>Website: stackoverflow.com</li>
<li>Commercial: Yes</li>
<li>Registration: Optional</li>
</ul>
<div style="float: left; width: auto; background-color:yellow">Stack Overflow is a privately held website, the flagship site of the Stack Exchange Network, created in 2008 by Jeff Atwood and Joel Spolsky. It features questions and answers on a wide range of topics in computer programming.
</div>
<div style="clear:both;text-align: center;"> <input type="button" value="Go to the Website" />
</div>
</div>
</div>

Answer 1

In order to change styles according to the screen resolution you can use a media query
#media (max-width: 1024px) {
.logo{
width: 100%;
}
}
Add classes to your elements in order to be able to target them with specific css rules:
<div style="float: left;width: 30%; overflow: auto;">
Becomes
<div class = "logo">
...
<style>
.logo{
float: left;
width: 30%;
overflow: auto;
}
</style>

Answer 2

You can't do responsive with inline styles. Once you have your styles separate, you can you use #media queries to style elements based on screen size
* {
box-sizing: border-box;
}
.tab {
background-color: orange;
color: white;
width: 30%;
padding: 4px 4px;
text-align: center;
margin: 0
}
.wrapper {
background-color: #f9f9f9;
border: 2px solid orange;
max-width: 800px;
overflow: auto;
}
.logo {
text-align: center;
}
#media (min-width: 640px) {
.logo {
float: left;
width: 30%;
overflow: auto;
}
.main {
float: left;
width: 70%
}
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.row {
margin-left: -5px;
margin-right: -5px;
margin-bottom: 5px;
}
.col {
margin: 0 5px;
width: calc(50% - 10px);
}
.col-left {
float: left;
background-color: lightblue;
}
.col-right {
float: right;
background-color: lightgrey;
padding: 5px
}
.highlight {
float: none;
width: auto;
background-color: yellow;
margin-bottom: 10px;
}
<div class="tab">Stackoverflow</div>
<div class="wrapper">
<div class="logo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7A3wAuudoXw8butMA-wxJdWYdUlNbWjC6EOV3iXnrUf08dwX3PA" /></div>
<div class="main">
<div style="text-align: center; font-size: 12pt; background-color:lightgreen">Some Informations
</div>
<div class="row">
<div class="col col-left">
<ul>
<li>Owner: Stack Exchange, Inc.</li>
<li>Available in: Englisch, Spanisch, Russian, Portuguese ...</li>
<li>Type of site: Knowledge markets</li>
</ul>
</div>
<div class="col col-right">
<ul>
<li>Website: stackoverflow.com</li>
<li>Commercial: Yes</li>
<li>Registration: Optional</li>
</ul>
</div>
</div>
<div class="highlight">Stack Overflow is a privately held website, the flagship site of the Stack Exchange Network, created in 2008 by Jeff Atwood and Joel Spolsky. It features questions and answers on a wide range of topics in computer programming.
</div>
<div style="clear:both;text-align: center;">
<input type="button" value="Go to the Website" />
</div>
</div>
<!-- /.main -->
</div>
<!-- /.wrapper -->

Answer 3

Your HTML structure is not that bad, even though it will be better if your style code was inside a .css file, if is that the case try it.
Anyways, in your mobile structure you have 3 main containers, I will called:
main-container
image-container
content
Your main-container has image-container and content inside, but both has a villain, in your case that is float: left, this thing will set everything to be on left of themselves an others objects around them.
I will suggest you to change your float: left and start to work with display: flex, you can find tons of information in the internet about it, to help you to construct very polish structures that will obey to any rule that you will build to them.

Answer 4

Thank you guys, I made a solution out of your answers.
I made it with display:flex, flex-wrap:wrap and #media.
For this I seperated the whole "body of the box" into a Logo container and a text fields container (almost like before) and gave both flex attributes. In the text fields I used float (like before).
For smaller screens I changed the flex-direction to column and now it works how I wanted it.