473,699 Members | 2,226 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Overlapping div-col's if using percentages

I've got a 3-column layout using percentages to define width of each
div-column.

#left-col { width: 20%; background-color: green; float:left; }
#center-col { width: 60%; background-color: blue; float:left; }
#right-col { width: 20%; background-color: green; float:left; }

Problem I find is if the combined content of all 3 columns happens to be
wider than the total size of the browser window the div's don't get stacked
on top of each other as they would if using fixed pixel width for each
column, but instead they overlap. Is there a way around this and still use
percentages? So if combined width's of the 3 colums exceeds total width of
the window to somehow force otherwise overlapping div's to stack vertically?

<div id="left-col">
Hail to the sun god
He sure is a fun god
Ra! Ra! Ra!
<img src="a400pixwid thimage.gif">
</div>

<div id="center-col">
<img src="a200pixwid thimage.gif">
To get something done, a committee should consist of no more than three
men, two of them absent.
</div>

<div id="right-col">
<img src="a100pixwid thimage.gif">
Ten years of rejection slips is nature's way of telling you to stop
writing. -- R. Geis
</div>
Jul 21 '05 #1
0 3065

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2188
by: Ethan | last post by:
I'm trying to set up a page with a header and 2 columns. I would like to use <div>s rather than tables. The page is here... http://64.142.13.246/style_testing_site/style_model2.htm In both IE 6 and Mozilla 1.3.1 on Windows the two columns overlap a little with the right column in front. I'd like them to touching but not overlapping. #leftColumn has a width of 35% and #rightColumn has left 35% and width 65% so they should just fill the...
2
19746
by: Kalvin | last post by:
I am very new to CSS and am trying to set up 2 divs in the same space on the page. The idea is that div1 will be an informational message only displayed sometimes. When there isn't a message to be put there, then div1 will be hidden and div2 content will be visible. The problem I am having with this is that the content is still lining up right beneath each other. If I make div1 hidden, then there is just white space where it used to...
6
5938
by: Gernot Frisch | last post by:
http://www.glbasic.com/bugs.htm I fixed the doctype and simplified it. The validator shows no error. But Firefox is still overlapping the DIV's. (View with IE7 to get the picture of what I want) Please, please help.
1
2258
by: spolsky | last post by:
hi, i have the following html. if padding given for the span it overlaps the divs within IE 6, FireFox 1.5 and Opera 9.01. i don't want to give sizes manually. how could i prevent this overlapping? thanks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
3
9881
by: =?Utf-8?B?c3Jpbml2YXM=?= | last post by:
Hi, I have a DIV tag which contains a textbox and command button. I'm having a grid view where EmpID is a hyperlink column.When EmpID is clicked I want the DIV to be displayed at center as a popup. The problem is that after clicking EmpID link, DIV tag is coming at the center but the textbox and command button are over lapping with gridview. I want to set DIV tag to front and gridview to be back. Can anybody please help me in this?
5
2022
by: jzeil | last post by:
The div is overlapping the H2 tag. Why? The adspace may or may not be there... so I cant explicitly set the width of the H2. It should fill up the space available. Thanks <div id="adSpace" style="display:block;float:right;width: 160px; height: 500px; border: 1px solid green;"> Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes here. Ad goes...
0
1245
by: Shawn Northrop | last post by:
I am trying to understand overlapping layers and am having some trouble. www.jeanneflight.com/funtrips/index.php I would like the two red boxes to fit next to each other inside of the "bot" div. I would also like the two red boxes to completely fill the "bot" div (width). The problem arises from the "boat" div. I repositioned this layer and put it on a new z-index. However it still takes up space in the "bot" div. I.E: "bot"...
0
2842
by: richard12345 | last post by:
Hi Guys I have problem with site I am building. The sidebar with menu and other thinks is overlapping footer. The footer move with the content and but it dos it dos not move with the sidebar. Here is the website: holtz-realty And also the html file and css file. Anny help will by mostly appreciated. I did try everything I can think of. HTML:
2
2048
by: manugm1987 | last post by:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"><!-- span.cls_002{font-family:Times,serif;font-size:12px;color:rgb(0,0,0);font-weight:normal;font-style:normal} div.cls_002{font-family:Times,serif;font-size:12px;color:rgb(0,0,0);font-weight:normal;font-style:normal} span.cls_004{font-family:Times,serif;font-size:11px;color:rgb(0,0,0);font-weight:normal;font-style:normal}
0
2973
by: dcardo | last post by:
Hi, I have the following CSS styles: #legend{ padding: 15px 0px 15px 0px; font:Georgia, "Times New Roman", Times, serif; font-size:1.8em; font-weight:bold;
0
8689
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9178
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9035
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8916
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8885
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7752
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6534
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4376
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3058
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.