Member Avatar for Monkey101

My right column is overlapping into my main content column how do I prevent this from happening? I tried using overflow: hidden; and overflow: auto;. I used the clear property for my left and main column which worked to prevent them overlapping.

  • 2 Contributors
  • 3 Replies
  • 185 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Monkey101
Member Avatar for JorgeM

It would really help if you provided a link to your site, or your code.

Member Avatar for Monkey101

My html code

<head>
<title>Sample</title>
<link rel ="stylesheet" type= "text/css" href="SampleWeb_Killebrew.css"/>
</head>

<body>
<div style="width:100%; margin-top: -18px;">
    <div style="width: 100%; height: 100px;  background-color: white;">
    <p style="padding-top: 3%;font-size:30px; font"><i>Welcome to Marketing page </i></p>
     </div>  

    <div style="width: 100%; overflow: hidden;">
    <div><li><a href="#" class="nav">About</a></li></div>
    <div><li><a href="#" class="nav">Books</a></li></div> 
    <div><li><a href="#" class="nav">Electronics</a></li></div>  
    <div><li><a href="#" class="nav">Apparel</a></li></div>
    <div><li><a href="#" class="nav">Activities</a></li></div>
    <div><li><a href="#" class="nav">Engagement</a></li></div>
    </div>

    <div class="thumbnail">
    <p class="center"><img src="Images/Books.png" alt="Books" width="325" height="290"/>
    <img src="Images/PC-Mac.jpg" alt="PC-Mac" width="325" height="290"/></p>
    </div>

    <div style="float: left; background-color: white; margin-left: 80px;">
    <img src="Images/Apple.jpg" alt="Apple" width="225" height="125"/>
    </div>

    <div style="width: 100%;">
    <div id="left-col" style="clear: left;">
    some text
    </div>

    <div id="central-col">
    some text
    </div>   

    <div id="central-box" style="clear: both; text-align: center;">
    some text
    </div>

    <div id="central-box2" style="clear: both; text-align: center;">
    some text
    </div>       

    <div id="central-box3" style="clear: both;">
    some text
    </div>

    <div id="central-box4" style="clear: both;">
    some text
    </div>

    <div id="right-col" style="text-align: center; clear:">
    some text
    </div>

    <div id="right-box2">some text</div>  

    <div id="right-box3">
    some text
    </div>

    <div id="right-box4" style="text-align: center;">
    some text
    </div>
    </div>

    <div id="footer"><p style="text-align: center;">Web-page</p> </div>
</div>
</body>
</html>
Member Avatar for Monkey101

CSS file

CSS.zip (0.66 KB)
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.