15 replies [Last post]
rajivp
rajivp's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2010-05-13
Posts: 6
Points: 7

I have to get a layout done in a particular way. I have set the clear property to do this. However, when I apply clear to multiple consecutive elements, any other element that follows the 'cleared' elements, gets placed along side the last of the 'cleared' element. What I need though is the elements to be placed along side the first cleared element. I have given the html code.

When the html is rendered, I would like 'Cell 6' to go along side 'cell 3', instead of 'Cell 5'. What do I need to do to achieve this. I have given the code for you to take a look at. Thanks for your help!

<!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> 
<title>Test</title> 
</head> 
<body> 
    <div style="float:left; padding: 10px;border: 1px solid gray;width: 500px;">
 
        <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> 
            cell 1
        </div> 
        <div style="float:left;width: 150px;border: 1px solid gray;"> 
            cell 2
        </div> 
        <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> 
            cell 3
        </div> 
        <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> 
            cell 4
        </div> 
        <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> 
            cell 5
        </div> 
        <div style="float:left;width: 150px;border: 1px solid gray;height:100px;"> 
            Cell 6
        </div>
    </div>
</center> 
</body> 
</html> 

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 7 years 28 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

Your making something very

Your making something very simple, very confusing. Try using this code as your template layout.

<div id="wrapper" style="width:304px; overflow:auto; margin:0 auto; border:1px solid gray">
	<div id="col1" style="float:left; width:150px; border:1px solid gray;">
		<div><span>cell 1</span></div> 
		<div><span>cell 2</span></div> 
		<div><span>cell 3</span></div>
	</div>
	<div id="col2" style="float:right; width:150px; border:1px solid gray;">
		<div><span>cell 4</span></div>
		<div><span>cell 5</span></div>
		<div><span>cell 6</span></div>
	</div>
</div>

Hope this helps, and please anybody feel free to correct anything I've wrote. Were all here to help each other! Smile

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Stop thinking in cells. DIVs

Stop thinking in cells. DIVs do NOT replace tables. Think Semantics. Mark up your HTML with meaning!
If you are putting tabular data, something you would put into Excel, on your site, then by all means USE a table.

If you could provide an image of your layout, maybe we can help you with a better way of coding your site.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

First, let me address an

First, let me address an etiquette issue. It is not acceptable practice to post a question to multiple forums at the same time. I gave you an answer here, then you moved the goal posts. No one here knew that and are duplicating efforts.

My answer gave you a solution to the original issue. Then you changed the parameters.

Quote:

Gary,

First of all thanks a lot for taking the time to code it up.

One thing I forgot to mention is that the 2-column option may not work for my purpose.

The code I put was part of a larger code chunk, which I generate dynamically. I would like to control the layout using CSS only without adding any additional HTML elements. By putting the additional divs, I am restricted to a 2-column layout. I need the flexibility to bring cell 2 to appear under left column. By enclosing the cell 2 and cell 6 in the right column I would lose that.

What I have appears to be working under IE7, but breaks under firefox/chrome.

I need to understand why cell 6 remains with last div element and does not float up.

Thanks again for your help.

Last question first; the float following the cleared box is at that box's level in the flow. The clear property extends the width of the containing block, so #6 can't move up.

Now the first issue: In the mid-tier logic, simply put #2 in the first box. #6, too, if needed. Remember, templates are programmable. You want to change the structure, and that's where you do that.

I could (maybe) be more helpful were you to indicate what circumstances control whether you have one, two, or fifteen columns; the structure is columnar. Think in terms of what you want to do; not how you want to do it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Forgetting to mention

Forgetting to mention something in technical terms is unforgivable and a waste of peoples time more often than not Angry

Cross posting to forums also prompts an Angry

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rajivp
rajivp's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2010-05-13
Posts: 6
Points: 7

Gary, I will apologize for

Gary,

I will apologize for posting this in multiple boards. I do not post messages often, so the mistake. I will keep your advice in mind.

I am not using templates. The HTML is generated through perl code which does not use templates. I will have mostly 5 or 6 Divs inside one wrapper div. The divs would contain a menu items, images, text.

Menu items would need to be displayed as horizontal menu bar or a vertical menu pane and may appear on top, on left or on right. Some flexibility is also necessary for the other elements. So the layout would need to be flexible.

The middle-tier code does not have any knowledge of how the page is to be displayed. Therefore, I thought I would need the DIVs to be independent and control the layout through only CSS.

Now, I do realize that the DIV are be displayed in the order in which they are in the HTML, therefore the last DIV stays with the DIV just before that. What confused me was that in IE7 the last DIV floated up.

I was looking at absolute positioning and negative margins. But may be there is a simpler way.

Thanks again

rajivp
rajivp's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2010-05-13
Posts: 6
Points: 7

Unfortunately, I was a bit

Unfortunately, I was a bit apologetic in the beginning and allowed people to pounce on me. Now this is a CSS board. People posting questions here are looking for CSS solutions and not HTML solutions. That much should be apparent to people who are attempting to provide solutions.

I had my question right, right from the beginning. All three answers I get was to change the my original HTML. If I needed an HTML solution, I would have posted this on htmlcreator.com - The first guy (jon..) gives me a no-brainer HTML solution. The second guy (a Guru) thinks I am thinking excel sheet. Look at the HTML I provided and not the text contained in it!!! And a cell does not necessarily mean a table cell.

Gary tried to help. Again with an HTML solution.

To the moderator, may be you should put it into your guidelines, something that says, please provide CSS solutions only!!!

I have wasted 3 days of my time. Wink

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

rajivp wrote: Unfortunately,

rajivp wrote:

Unfortunately, I was a bit apologetic in the beginning and allowed people to pounce on me. Now this is a CSS board. People posting questions here are looking for CSS solutions and not HTML solutions.

There isn't any such thing as a "CSS solution" in the sense you seem to mean. You can look forever if you like, but you'll never ever find it.

CSS is meaningless without HTML and it's just plain amazing that you don't understand that. Can anyone really be that ignorant?

In order to learn you must be able to listen. You have decided not to listen so you will never learn, and you aren't worth wasting any more time on until you start to listen. So this is my last word to you and, one hopes, from anyone else on the board who would be well advised to spend their time (offered freely for no charge) elsewhere.

I have deposited in your bank account a full refund of all the money you paid to get advice from us. Now go away and don't come back until you gain a little wisdom. And good riddance.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

rajivp
rajivp's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2010-05-13
Posts: 6
Points: 7

Your ignorance is that you

Your ignorance is that you think people so ignorant that they think of CSS without thinking HTML. I gave the HTML part, I expect some CSS as part of the solution.

All the 3 solutions I was given was pure HTML with NO TRACE of any CSS in them.

I can see the advice is free, so are the disparaging remarks with it.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

rajivp wrote: Your ignorance

rajivp wrote:

Your ignorance is that you think people so ignorant that they think of CSS without thinking HTML. I gave the HTML part, I expect some CSS as part of the solution.

But, since your html is crap, we can't help you with the CSS until you fix it. No amount of CSS can fix crap html. If you were interested you could find out why your html is such crap, but since you aren't interested we can't help you.

Your beliefs about what you call my "ignorance" are merely your own delusions.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 7 years 28 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

Not only am I shocked by

Not only am I shocked by these posts, but they have angered me. How dare you come to these forums and speak like this, I am assuming from your posts that you are a young problematic child as you share some very common personality traits such as an inability to listen to what others tell you, with addition to your rude and offensive words. You say none of our solutions provided any CSS, but did you not open your eyes to see the inline CSS in my first post? You seem to have a lack of understanding as to the foundations of web development including how CSS actually relates to HTML, I'm saying this based on your assumptions that one could provide an efficient CSS solution without having to re-work bad HTML which was what you originally posted. To be honest, I don't want to say anymore to you, and neither will I provide any more of my free time or assistance. If this was my forum I would have banned you outright, so please leave as I can assure you, you are not welcome around here as far as I'm concerned.

rajivp
rajivp's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2010-05-13
Posts: 6
Points: 7

I thought you were not going

I thought you were not going to waste your time on my posting. I can clearly see that you are upset. But not necessarily right.

You call my HTML crap without saying why. Did you check if my HTML validates? I had a look at a couple of good CSS books. I see that they have presented HTML identical to mine (A wrapper div containing a set of divs) and have tried different layouts. So calling my HTML crap or bad is an easy way out.

I know very little about CSS. I picked up a book and looked at a chapter and came up with a solution without adding any more elements to my HTML. May be what I have is crude and perhaps the wrong way to do it. But it appears to be an alternative. I am pretty sure other CSS techniques exist which offer flexibility with layouts when changing HTML is not an option. Sometimes, nesting HTML elements may limit your ability to be flexible with your layouts.

To me, a CSS solutions is when you try to solve a presentation problem using purely CSS. An HTML solution is one when you add HTML elements to solve it. What I found odd that an HTML solution came to the minds of most people.

I have given code snippets. I am not saying they are not crap. But they attempt to solve a problem using CSS alone.

Layout 1

<!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> 
<title>Test</title> 
<style type="text/css">
DIV {
   border: 1px solid gray;
}
.Wrapper {
    margin: auto;
    width: 600px;
    position: relative;
    border: 0;
    height: 500px;
    background-color: silver;
}
.LeftElement {
    width: 150px;
    height: 30px;
    float: left;
    clear: left;
    margin: 0px 5px 5px 0px;
}
.MainContent {
    position: absolute;
    left: 157px;
    top: 0px;
    width: 400px;
    height: 400px;
}
 
</style>
</head> 
<body> 
    <div class="Wrapper">
        <div class="LeftElement"> 
            elem 1
        </div> 
        <div class="LeftElement"> 
            elem 2
        </div> 
        <div class="LeftElement"> 
            elem 3
        </div> 
        <div class="LeftElement"> 
            elem 4
        </div> 
        <div class="LeftElement" style="height: 100px;"> 
            elem 5
        </div> 
        <div class="MainContent"> 
            elem 6
        </div>
    </div>
</body> 
</html> 

Layout 2

<!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> 
<title>Test</title> 
<style type="text/css">
DIV {
   border: 1px solid gray;
}
.Wrapper {
    margin: auto;
    width: 600px;
    position: relative;
    border: 0;
    height: 500px;
    background-color: silver;
}
.LeftElement {
    width: 150px;
    height: 30px;
    float: left;
    clear: left;
    margin: 0px 5px 5px 0px;
}
.MainContent {
    position: absolute;
    left: 157px;
    top: 37px;
    width: 400px;
    height: 400px;
}
 
</style>
</head> 
<body> 
    <div class="Wrapper">
        <div class="LeftElement"> 
            elem 1
        </div> 
        <div class="LeftElement" style="clear: none;"> 
            elem 2
        </div> 
        <div class="LeftElement"> 
            elem 3
        </div> 
        <div class="LeftElement"> 
            elem 4
        </div> 
        <div class="LeftElement" style="height: 100px;"> 
            elem 5
        </div> 
        <div class="MainContent"> 
            elem 6
        </div>
    </div>
</body> 
</html> 

Layout 3

<!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> 
<title>Test</title> 
<style type="text/css">
DIV {
   border: 1px solid gray;
}
.Wrapper {
    margin: auto;
    width: 600px;
    position: relative;
    border: 0;
    height: 500px;
    background-color: silver;
}
.LeftElement {
    width: 150px;
    height: 30px;
    float: left;
    clear: left;
    margin: 0px 5px 5px 0px;
}
.MainContent {
    position: absolute;
    left: 157px;
    top: 37px;
    width: 400px;
    height: 400px;
}
 
</style>
</head> 
<body> 
    <div class="Wrapper">
        <div class="LeftElement"> 
            elem 1
        </div> 
        <div class="LeftElement" style="clear: none;"> 
            elem 2
        </div> 
        <div class="LeftElement" style="clear: none;"> 
            elem 3
        </div> 
        <div class="LeftElement"> 
            elem 4
        </div> 
        <div class="LeftElement" style="height: 100px;"> 
            elem 5
        </div> 
        <div class="MainContent"> 
            elem 6
        </div>
    </div>
</body> 
</html> 

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 7 years 28 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

Please can somebody just lock

Please can somebody just lock this topic and ban this moron...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

rajivp wrote: Now this is a

rajivp wrote:

Now this is a CSS board. People posting questions here are looking for CSS solutions and not HTML solutions

This forum focusses on helping with CSS, yes; but I'm afraid you are incorrect in thinking that must exclude any mention or notion regarding markup. CSS and markup have an absolutely fundamental symbiotic relationship. CSS has no purpose and no function unless allied to markup and with that in mind incorrect markup has to be mentioned and corrected, even if not necessarily incorrect if it's better written somehow then it behoves us to make mention of that.

Now as for the colourful language being used in this thread, can we please try and keep it clean and polite! that goes for all of us!

Normally I don't like locking threads but given the course of this one I think it's reached an end so it's locked, naturally if Gary wishes to make further comment he may unlock it; likewise rajipv if you wish to comment in closure then please contact one of us to unlock the thread.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rajivp
rajivp's picture
Offline
newbie
Last seen: 12 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2010-05-13
Posts: 6
Points: 7

Calling someone a moron is

Calling someone a moron is the easiest thing in the world. Provide an intelligent answer is hard.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Tantrum, anyone?

Thanks, Hugo. I will re-open this for a moment.

I notice that there were some insulting comments made, which were neither tactful nor at the least, witty or subtle. Not a good thing.

Now, ajivp, you need to understand two things about css. First is that it is dependent on the structural markup, the html. Your desired presentation did not match the structure of the document. That is why others and myself suggested structural changes. Further, you were not helpful in that you did not or could not provide the logic that would require differing layouts or structures. It is common, good practice to build each page with items grouped within the structural elements they belong to.

The second thing is that while it may be possible to do something with css, it does not follow that you should. Using absolute positioning will work, but it leaves you with an overly sensitive layout to code, one that is expensive to maintain, and one that is very fragile; subject to breaking over the smallest issue. That is not a method to use unless you've exhausted all alternatives, including restructuring the document. There is a place for absolute positioning, but as you described the issue, this isn't it.

We are, for the most part, working web developers. We don't advise people to use infeasible, non-robust, or troublesome methods just because that's what they think they want.

The trick on your part is to ask how to solve the issue, not how to do what you've decided is the solution.

gary

re-locked

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.