Simple floating problem

Hey,

The page contains a simple layout consisting of a table, paragraph and button. Everything displays as it should except for the button. I want it to float under the paragraph and to the right side. I tried putting the paragraph and button in a seperate div, set the button to display:block; and tried floating it to the right. I also tried clearing on several elements but nothing seems to work. Maybe someone has an idea on how I could get the button under the paragraph.
The picture I inserted might clarify this problem more:

Here is the HTML and CSS:
HTML


<!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">
<head>
<title>Kleurentester</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="kleurentester.css" />
<script type="text/javascript">
/* <![CDATA[ */
function testen(){
	var tekst = document.getElementById("tkleur").value;
	var achtergrond = document.getElementById("akleur").value;
	var link = document.getElementById("lkleur").value;
	var vlink = document.getElementById("b_lkleur").value;
	var alink = document.getElementById("a_lkleur").value;
	
	var string = '<body bgcolor="'+achtergrond+'">';
	string += '<center><h3>Uw gekozen kleurencombinatie:</h3>';
    string += '<hr width="200" color="#000000">';
    string += '<br><font color="'+tekst+'">Dit is de tekstkleur</font>';
    string += '<br><font color="'+link+'"><u>Dit is de linkkleur</u></font>';
    string += '<br><font color="'+vlink+'"><u>Dit is de bezochte linkkleur</u></font>';
    string += '<br><font color="'+alink+'"><u>Dit is de actieve linkkleur</u></font>';
    string += '<p><hr width="200" color="#000000">';
    string += '<p><input type="button" value="sluiten" onClick="self.close();">';
    string += '</center></body>'; 
	
	var oVenster = window.open("","","height=250,width=300");
	oVenster.document.write(string);
}
/* ]]> */
</script>
</head>
<body>
<div id="wrapper">
	<div id="kleurentester">		
		<table border="1">
			<thead>
				<tr>
					<th>Eigenschap</th>
					<th>Kleur</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tekstkleur</td>
					<td><input type="text" id="tkleur" size="16" /></td>
				</tr>
				<tr>
					<td>Achtergrondkleur</td>
					<td><input type="text" id="akleur" size="16" /></td>
				</tr>
				<tr>
					<td>Linkkleur</td>
					<td><input type="text" id="lkleur" size="16" /></td>
				</tr>
				<tr>
					<td>Bezochte linkkleur</td>
					<td><input type="text" id="b_lkleur" size="16" /></td>
				</tr>
				<tr>
					<td>Actieve linkkleur</td>
					<td><input type="text" id="a_lkleur" size="16" /></td>
				</tr>
			</tbody>
		</table>
	</div>
	<p>Vul de <span class="highlight">naam</span> (bv. black, yellow,red,...) of <span class="highlight">hexadecimale kleurcode</span> (bv. 00FFFF,FF00FF,FFFFFF,...) 
	in de invoervakken in om een bepaalde kleurcombinatie te testen. Klik op de knop "testen" om 
	een voorbeeldpagina te bekijken.</p>
	<input type="button" value="testen" onclick="testen()" />
</div>
</body>
</html>

CSS


/* RESET */

html,body,div,table,thead,tbdoy,tr,th,td{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	background:transparent;
	vertical-align:baseline;
}

body{
	font:11pt/15pt arial,helvetica,sans-serif;
}

/* TABLE*/

div#wrapper{
	text-align:center;
	width:750px;
	/*border:1px solid red;*/
	overflow:hidden;
	margin:25px auto 0 auto;
}

p{
	width:375px;
	margin:auto;
	text-align:left;
	float:left;
	padding:5px;
	/*margin-left:15px;*/
	margin:25px 0 0 15px;
}

span.highlight{
	font:italic 11pt/15pt arial,helvetica,sans-serif;
}

table{
	float:left;
	margin:0 auto;
	/*background:black;*/
	text-align:left;
	padding:2px;
}

thead{
	font:12pt/15pt arial,helvetica,sans-serif;
}

th{	
	text-align:left;
	padding:5px;
	/*background:#E0F0FF;*/
}

tr{	
	/*background:#FFE0E0;*/
}

td{
	padding:5px;
}

/* BUTTON */

div#knop{
	text-align:center;
	margin:10px 0 0 0;
}

This works in FF, IE8 and Opera (the ones I’ve tested).
You can drag the div to wherever you want it.

#button {
	position: absolute;
	width: 50px;
	height: 25px;
	left: 674px;
	top: 195px;	
}
<div id="button">
	<input type="button" value="testen" onclick="testen()" />
    </div>

I think there will be problems when you resize the window but I will test it out.

thank you in any case :wink:

Edit: As I thought the button doesn’t flow with the rest of the document when resizing the browser. Positioning elements in an absolute way generally only works when they have a relatively positioned containing/parent element.
A relatively contained element stays within the document flow whereas an absolutely positioned element doesn’t and as a result doesn’t have any references to reposition itself - and as intended - in case the document reflows and that is exactly what happens when you resize a window.

Hi,

You don’t want to float all p elements as that would be silly :). Just create a column to the side and include the content normally.

e.g. remove the styles from the p element and place them here:


.column {
    width:375px;
    margin:auto;
    text-align:left;
    float:left;
    padding:5px;
    /*margin-left:15px;*/
    margin:25px 0 0 15px;
display:inline;
}
.column input{float:right;}



        </table>
    </div>
 [B]   <div class="column">[/B]
        <p>Vul de <span class="highlight">naam</span> (bv. black, yellow,red,...) of <span class="highlight">hexadecimale kleurcode</span> (bv. 00FFFF,FF00FF,FFFFFF,...) 
            in de invoervakken in om een bepaalde kleurcombinatie te testen. Klik op de knop "testen" om 
            een voorbeeldpagina te bekijken.</p>
        <input type="button" value="testen" onclick="testen()" />
[B]    </div>[/B]
</div>
</body>
</html>

Maybe I should have added that the edited info was just that - Info(for whoever might be interested) and not an attempt at being a know-it-all… :wink:

@Paul: I understand and agree to your remark especially in the context of multiple <p> elements but the reason why I chose to adress the <p> element directly is because there is only one <p> element on the page and there would be no difference between adressing the <p> element either directly or specifically via an id.
You would however need a containing box to set boundaries for your floats and that is what I tried before - you can see the remnants of this under ‘/* Button */ -> div#knop’ in the CSS file.
whilst having the containing box I tried setting the button to display:block which (oddly enough) didn’t work and I decided to get rid of my containing block to reduce extra code.
I didn’t try adding display:inline to the <p> element when I had the containing div. I tried it on the <p>-element and it didnt work.

Maybe you can answer these questions?: How does it differ from setting display:inline to the <p> - element without a containing div and when contained? And why didn’t display:block work? - I spoke too soon I didn’t contain it all properly :wink:

There still is a problem with the float:right on my button. It stays centeralised no matter what. It inherited text-align:center from the div#wrapper but alternating that value doesn’t change anything.
Got any ideas or perhaps a solution? - I spoke too soon I didn’t adress my float correctly. It works fine :wink:

If you have only on p element on your page and on your whole site as you described it globally then yes that would be fine. However I have never come across a site that only had one p element lol :). There should be more p elements than anything else in my experience.

You need to think more logically because you had a p element and an input living in the same section and therefore you should contain that section with a div.

You could have put the input inside the paragraph and set the input to float right and clear:both and there would have been no need to change anything else but that wouldn’t be semantically correct as the input wasn’t part of the paragraph.

Display:inline has nothing to do with the issue and is only added to my code to cure the double margin bug in IE. Inputs are inline elements and will be affected by text-align so you need to set them to block or float them if you don’t want text-alignment to affect them.

Everything needs to live somewhere and you need to create a suitable structure for you elements to inhabit without the need to place every little thing :).

Aah, but you are never too old to learn dear Paul. It is a test-page for my simple javascript app and I wanted to make use of the occassion to practice some CSS.
Indeed you couldn’t have known that but you can’t know about things you don’t ask about.

You need to think more logically because you had a p element and an input living in the same section and therefore you should contain that section with a div.

If you would have looked at my code and read my post more carefully you would have gathered that this is no new concept to me. I’m beginning to think it is you who needs more insight.

Enough of this funny stuff now. I appreciate you helped me out but there is no need for such an attitude. Instead of practising CSS all day you might want to practise humility for a change.

Enough of this funny stuff now. I appreciate you helped me out but there is no need for such an attitude. Instead of practising CSS all day you might want to practise humility for a change.

I am completely bewildered and cannot for the life of me understand how you can make such a comment from my attempts to help you.:frowning:

I was offering sound and considered advice in a good light hearted manner and am at a loss to understand your change in attitude and it makes my heart sink to think that I spend considerable time giving out good advice for free to be reprimanded in such a manner.

I utterly fail to see how my posts could be construed in any other way and I have read through them again and again.

I am very disappointed as you can tell and will withdraw from this conversation without further ado.

:slight_smile: You do that.

Well I must admit that that was quite rude. You can’t call me too old now can you ;)?

Did you have any more questions you need answered :)?

He did look at the code you posted - he specifically mentions that if you want the <p> element and the input to work together, then they need to be grouped as such - in the sample code you posted, there is no structure binding the two elements together. They are simply listed back to back.

But if you start floating elements or even positioning them relatively, then those positions are based on the parent, in your case the <div id=“kleurentester”>. What he suggested in post #4 of this thread (with sample code) was to group those two elements together to give you more finite control.

So I took Paul’s suggested and applied the code he provided, and the end result is exactly what you asked for. I’m not exactly sure why you took offense to the manner in which he tried to help you, but he helped you in the very first post he made in this thread.


<!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">
<head>
<title>Kleurentester</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* RESET */
html,body,div,table,thead,tbdoy,tr,th,td{
margin:0;
padding:0;
border:0;
outline:0;
background:transparent;
vertical-align:baseline;
}
body{
font:11pt/15pt arial,helvetica,sans-serif;
}
/* TABLE*/
div#wrapper{
text-align:center;
width:750px;
/*border:1px solid red;*/
overflow:hidden;
margin:25px auto 0 auto;
}
span.highlight{
font:italic 11pt/15pt arial,helvetica,sans-serif;
}
table{
float:left;
margin:0 auto;
/*background:black;*/
text-align:left;
padding:2px;
}
thead{
font:12pt/15pt arial,helvetica,sans-serif;
}
th{ 
text-align:left;
padding:5px;
/*background:#E0F0FF;*/
}
tr{ 
/*background:#FFE0E0;*/
}
td{
padding:5px;
}
/* BUTTON */
div#knop{
text-align:center;
margin:10px 0 0 0;
}
.column {
width:375px;
margin:auto;
text-align:left;
float:left;
padding:5px;
/*margin-left:15px;*/
margin:25px 0 0 15px;
display:inline;
}
.column input{float:right;}
</style>
<link rel="stylesheet" type="text/css" href="kleurentester.css" />
<script type="text/javascript">
/* <![CDATA[ */
function testen(){
var tekst = document.getElementById("tkleur").value;
var achtergrond = document.getElementById("akleur").value;
var link = document.getElementById("lkleur").value;
var vlink = document.getElementById("b_lkleur").value;
var alink = document.getElementById("a_lkleur").value;
 
var string = '<body bgcolor="'+achtergrond+'">';
string += '<center><h3>Uw gekozen kleurencombinatie:</h3>';
string += '<hr width="200" color="#000000">';
string += '<br><font color="'+tekst+'">Dit is de tekstkleur</font>';
string += '<br><font color="'+link+'"><u>Dit is de linkkleur</u></font>';
string += '<br><font color="'+vlink+'"><u>Dit is de bezochte linkkleur</u></font>';
string += '<br><font color="'+alink+'"><u>Dit is de actieve linkkleur</u></font>';
string += '<p><hr width="200" color="#000000">';
string += '<p><input type="button" value="sluiten" onClick="self.close();">';
string += '</center></body>'; 
 
var oVenster = window.open("","","height=250,width=300");
oVenster.document.write(string);
}
/* ]]> */
</script>
</head>
<body>
<div id="wrapper">
<div id="kleurentester"> 
<table border="1">
<thead>
<tr>
<th>Eigenschap</th>
<th>Kleur</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tekstkleur</td>
<td><input type="text" id="tkleur" size="16" /></td>
</tr>
<tr>
<td>Achtergrondkleur</td>
<td><input type="text" id="akleur" size="16" /></td>
</tr>
<tr>
<td>Linkkleur</td>
<td><input type="text" id="lkleur" size="16" /></td>
</tr>
<tr>
<td>Bezochte linkkleur</td>
<td><input type="text" id="b_lkleur" size="16" /></td>
</tr>
<tr>
<td>Actieve linkkleur</td>
<td><input type="text" id="a_lkleur" size="16" /></td>
</tr>
</tbody>
</table>
</div>
<div class="column">
<p>Vul de <span class="highlight">naam</span> (bv. black, yellow,red,...) of <span class="highlight">hexadecimale kleurcode</span> (bv. 00FFFF,FF00FF,FFFFFF,...) 
in de invoervakken in om een bepaalde kleurcombinatie te testen. Klik op de knop "testen" om 
een voorbeeldpagina te bekijken.</p>
<input type="button" value="testen" onclick="testen()" />
</div>
</div>
</body>
</html>

Ajajak.

We don’t do bad manners on this forum. I think you ought to moderate your attitude. I doubt you will get any more help from anybody else when you offend Paul, who doesn’t deserve rudeness from anyone.

Did any of the previous tips worked? If not, I recommend you to check if, somewhere, the display is set as inline.

they worked, thank you 3dy

[ot]

Cheer up, Paul :)[/ot]

Off Topic:

Seconded. Being one of those over-sensitive, “driven by emotion and intrinsically unsociable” kind of creatures, even I can’t see where you could have gone wrong in your response. C’est la vie, n’est pas? :slight_smile: