Html boxes moving when browser resized [closed] - css

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
when i resize the browser, three elements in the middle (It's for everybody, It's one big community, its fun) position dont stay static. the third box goes under the other two boxes.
Here is the link,http://www.archimedus.com/archimedus/
I have been battling with this css issue for a day now.
It could be very simple but still i haven't been able to figure out what mistake i have made.
can someone please advise.

Answer 1

Start by checking your html marckup. You must use bottom_text classes instead of id's . You should not have duplicated id's in the document.
Then you must take a decision about what do you want to happen width your divs
Specific to your question
If the target is to avoid the relocation effect, wrap then in a container div and let them float inside of it. Then set a minimum width to your wraper div. Decide how will behave the overflow of it.
Your floting divs can use relative margins in order to obtain some flexible layout, etc...

Answer 2

The simplest way to fix this would be to give the boxes a max width of 33%.
#content_mass_bottom #bottom_text {
float: left;
width: 425px;
max-width: 33%;
}

Answer 3

You can move your bottom_text divs into the tbox1/2/3 divs.
<div id="tbox1">
<img src="/archimedus/images/everybody.png" class="everybody">
<div id="bottom_text">
<p class="bottom_text">Many hands make light work. Imagine what we can achieve with our collective abilities With Archimedus there is an unlimited amount of knowledge available, waiting to be tapped by you. You’ll never be bored again. Best of all… it’s free!</p>
</div>
</div>