 Motoma  3,237
Recognized Expert Specialist
Hello all!
My end goal is to create an HTML layout that will expand and contract with the window size, while maintaining a variable number of content columns.
In the example below, you will see that if you stretch the browser window until there is two columns, divs on the right stack flush with each other vertically; however, divs on the left also stack flush with the divs on the right, leading do some gaps in the layout. The layout is further exacerbated when the window is expanded to more columns (add more divs to see this happen).
If someone knows of a way that I can get all divs to cutely stack below each other, while maintaining the liquidity of this layout, and accomplishing this all with each container styled uniformly, I would greatly appreciate it.
Thanks in advance,
Motoma. -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
<title>A quick example of my issue</title>
-
-
<style type="text/css">
-
body
-
{
-
margin: 0em auto;
-
width: 85%;
-
background: #204364;
-
font-family: verdana;
-
}
-
-
div
-
{
-
margin: 0.3em;
-
padding: 0.3em;
-
float:left;
-
width: 25em;
-
border: 1px gray dashed;
-
background: #ffffff;
-
}
-
</style>
-
-
</head>
-
-
<body>
-
<div>
-
<p>This div has only one entry</p>
-
</div>
-
<div>
-
<p>This div has a couple items</p>
-
<p>This div has a couple items</p>
-
</div>
-
<div>
-
<p>This div has a couple items</p>
-
<p>This div has a couple items</p>
-
</div>
-
<div>
-
<p>This div has only one entry</p>
-
</div>
-
<div>
-
<p>This div has a lot to say!</p>
-
<p>This div has a lot to say!</p>
-
<p>This div has a lot to say!</p>
-
</div>
-
<div>
-
<p>This div has only one entry</p>
-
</div>
-
</body>
-
</html>
-
6 19321  Motoma 3,237
Recognized Expert Specialist
Partial solutions also accepted!
Yep. It does that.
As you probably know, all those elements are block level and browsers will try and keep everything stacked on top of each other. Floating one removes it from the normal flow but the space for the non-floated blocks is maintained which is what is causing the gaps.
There are a couple of elegant solutions that I've seen but I'd have to look them up. I tend to create documents and stuff them in a folder with hundreds of others so that may take a while.
The first uses javascript and I might be able to find the link to that fairly quick. The second I don't recall and might take longer to find.
In either case, let me know if the js solution is acceptable.
Motoma 3,237
Recognized Expert Specialist
Are you suggesting that I should, on resize, rearrange each div into the appropriate number of colunms?
That's a terrible hack, and it introduces the problem of measuring the heights of each element to get evenly tall columns.
Your original post sounds like that's exactly what you're trying to do so I guess I don't understand.
Motoma 3,237
Recognized Expert Specialist
Yeah, I was hoping for some sexy CSS that would do the work for me :)
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Finn Newick |
last post by:
By defining a style as follows:
@media aural, handheld {td.layout {display:block;}}
I'm hoping to linearise layout tables when viewed by screenreaders and
handheld devices (it is also be in some selectable user preferences).
This works as intended in Netscape 7 - all the cells stack vertically above
each other nicely, but not in...
|
by: Michael Ramey |
last post by:
Hi,
I've have two divs, that are laid out side-by-side. (I'm floating the first
div to the left) I need to set up css on these two divs so that the second
div is vertically aligned to the first one (in the middle). How can I go
about doing this?, both divs contain textual elements and I won't easily
know the heights, so absolute...
|
by: Tyler Carver |
last post by:
I would like to do something that seems so basic with two div's but I
don't think it can be done. Tables can do it in a snap. I was
convinced that css was the way to go for layout but without being able
to do even the easiest things, I don't see how.
Here is the table way to do the layout (I want this to work in
compliance mode in all...
|
by: Oddball |
last post by:
I have a problem with the positioning of two divisions.
They are containined within a content division in which all the page content happens
(ie not the menus, etc.).
The behavior I would like (and the behavior that happens in IE) is for the content
division (from now on 'ConDiv') to resize with the content of either of the sub divisions...
|
by: Guadala Harry |
last post by:
Please follow my thinking here and tell me if I'm nuts or if this is a
reasonable thing to do given the objective:
I'd like to present 3 data values on an aspx page - each styled uniquely,
and the total width to be limited to some arbitrary value (400px or so).
Given that I'd like to limit the total width, I can't use a <td> because the...
| | |
by: maroger |
last post by:
I'm sure this is a common issue, but I haven't come across anything
that works for me thusfar. I am trying to fix my header, which works
fine in firefox but has extra space in IE. Here are example html and
css files that illustrate my problem:
http://torch.cs.dal.ca/~mroger/css/ietest.html
http://torch.cs.dal.ca/~mroger/css/styles.css
...
|
by: Erind |
last post by:
Okay, I tried the above divs but they didnt work. My columns and whatnot were being pushed around and settled on top of each other. then I started all over and ended up with a layout 30px bigger on each side. I put a picture together to help with this:
http://www.imagemule.com/uploads/erindoNOc.gif
-The two blue boxes (column-left and...
|
by: stan |
last post by:
I have internal links/jumps within divs. The divs have vertical
scrolling. When a link is clicked, both the space within the div as
well as the entire page vertically scroll. I would like to restrict
the vertical scrolling in this situation (when an internal link is
clicked) to the space within the div (the entire page should not
scroll). ...
|
by: Adam |
last post by:
I have four roughly square DIVs, all the same height, which I need to
line up horizontally across the page. What would be the best way to do
this? At the moment I have a very botched solution where I have
display:table-cell set on each of the DIVs. This works as far as
lining them up is concerned, however to get any spacing between them
the...
|
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...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
| | |
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. ...
|
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...
|
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...
|
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...
|
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...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert...
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
