Images are overlapping when resizing the page

Question

Hi stackoverflow community. I run into the issue when image elements (social media buttons) are running into the image on my webpage. First of all my elements are overflowing the div box where they are sat. I was trying to fix it with a overflowproperty, however it wasn't what I was after. So I tried to use clearfix to keep elements within the div and that just got out of control. So 2 hours later I still haven't solved the issue. I was trying to use margin-right to move social buttons away from the image, but it is not working. Also slightly out of this topic, after I have implemented social buttons with relative position my line at the top of the page got shorter in one end. Use to stretch almost across whole page and now it is cut. So, yeah two issues here. I would really appreciate some help. Here is my crucial for two problems code below:

HTML:

<!Doctype html>
<html>
<body>
<link href="style.css" rel="stylesheet">
<div class="top_page">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<ul id="nav_container">

<li><a href="about_proper.html">About</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="news.html">News</a></li>
</div>
<div class="media_buttons">
<ul>
<li><a href="about_proper.html"><img src="social/facebook.png" alt="facebook_social_button" style="width:30px;height:30px;"/></a></li>
<li><a href="news.html"><img src="social/twitter.png" alt="twitter_social_button" style="width:30px;height:30px;"/></a></li>
</ul>
</div>

<hr>
<h1>Travel locally and globally</h1>

<div class="content">
<img src="travel.jpg" alt="Go Travel" style="text-align:centre;width:504px;height:228px;"/>
</div>

CSS:

 #nav_container {

        margin: 0%;
        text-align: center;
        padding-top: 5px; 
        left:5px;
        right:5px;
        width:auto;

    }

    #nav_container li {
        display: inline;
        margin: 4%;
        font-family: Arial; 
    }

    #nav_container a {
        color:#3e3e3e;
        background-color:#ffffff;
        text-decoration: none;   
    }
    #nav_container a:hover {

        background-color:#ffffff;
        color: #3e5869;
    }

    #nav_container a:visited {
        color:#357c49;
        background-color: #ffffff;
    }

    div {
        padding-top: 50px; 
        left:5px;
        right:5px;

    }

    h1 {
        text-align:center;
        margin: auto;
        width:60%;
        color: #73AD21;
        font-family: Arial;
        top:-40px;
        height: 6%;
        padding: 3%;
    }
    .content {
        margin:auto;
        text-align:center;
        top: 5px;
        padding-bottom:45px;
}
    .media_buttons {
        position:relative;
        top:300px;
        left:20%;
        border:solid;
        padding:5px;
        display:block;
        text-decoration: none;
        list-style-type:none;
    }

    .media_buttons li {
        list-style-type:none;
        width:100%;
        height:100%;
        margin-right:50px;
        float:left;
    }

Welcome to SO, just a little notice : `` must be ine `` not `` , i'll check what i can do for you :) — moolsbytheway, Sep 05 '16 at 18:15

moolsbytheway · Answer 1 · 2016-09-05T20:12:33.457

jsFiddle

EDIT

#nav_container {

        margin: 0%;
        text-align: center;
        padding-top: 5px; 
        left:5px;
        right:5px;
        width:auto;

    }

    #nav_container li {
        display: inline;
        margin: 4%;
        font-family: Arial; 
    }

    #nav_container a {
        color:#3e3e3e;
        background-color:#ffffff;
        text-decoration: none;   
    }
    #nav_container a:hover {

        background-color:#ffffff;
        color: #3e5869;
    }

    #nav_container a:visited {
        color:#357c49;
        background-color: #ffffff;
    }

    div {
        padding-top: 50px; 
        left:5px;
        right:5px;

    }

    h1 {
        text-align:center;
        margin: auto;
        width:60%;
        color: #73AD21;
        font-family: Arial;
        top:-40px;
        height: 6%;
        padding: 3%;
    }
    .content {    
 margin: auto;
    text-align: center;
    top: 5px;
    width: 596px;
    padding-bottom: 45px;
    position: relative;
}

    .media_buttons { 
     position: absolute;
    padding: 5px;
    display: block;
    top: 30px;
    width: 0px;
    text-decoration: none;
    z-index: 1;
    list-style-type: none;

    }

    .media_buttons li {
     list-style-type: none;
    width: auto;
    height: auto;
    margin-right: 10px;
    display: inline-block;

    }

<div class="top_page">
<ul id="nav_container">

<li><a href="about_proper.html">About</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="news.html">News</a></li>
</div>

<hr>
<h1>Travel locally and globally</h1>

<div class="content">

<div class="media_buttons">
<ul>
<li><a href="about_proper.html"><img src="social/facebook.png" alt="facebook_social_button" style="width:30px;height:30px;"/></a></li>
<li><a href="news.html"><img src="social/twitter.png" alt="twitter_social_button" style="width:30px;height:30px;"/></a></li>
</ul>
</div>
<img src="travel.jpg" alt="Go Travel" style="text-align:center;width:504px;height:228px;"/>
</div>

Hi Mools, thank you for this, the thing is I want them along side the image and so it is not overlapping with that image when resizing the page. — Max Visna, Sep 05 '16 at 19:12
That's great. How did you manage to use just absolute positioning. I thought you only can move it inside a relatively positioned div? — Max Visna, Sep 05 '16 at 20:06
you have to make it `absolute` so you can put it `on` the image instead of `relative` that will put it beside your picture , and then use `z-index:1` to make it's `z-index` greater than image's so the user can `click` it instead of clicking the picture — moolsbytheway, Sep 05 '16 at 20:11
Hi Mols, when I implement the code I have the same issue as before. It is still overlapping. How do I make sure there is a lways a space between social buttons and the space when I resizing the page (making it smaller)? — Max Visna, Sep 05 '16 at 21:05
can you post your code all page code in a jsFiddle, so i can see what's the problem, maybe some other css is causing the problem — moolsbytheway, Sep 07 '16 at 00:05

Images are overlapping when resizing the page

1 Answers1