PDA

View Full Version : Div Floats


jmgravell
12-11-2014, 04:33 PM
Hi all,

I was wondering if you'd be able to help me out? :?

Essentially, what I'd like is to have 3 Div styles/tags next to each other in the form of text boxes with black borders.

How would I go about doing this?

edbr
12-12-2014, 01:14 AM
you answered your self in the subject. Float them left and they will position themselves horizontally inline
you could if you wanted create a class and apply it to any object
.fleft{ float: left;}

jmgravell
12-12-2014, 08:29 AM
you answered your self in the subject. Float them left and they will position themselves horizontally inline
you could if you wanted create a class and apply it to any object
.fleft{ float: left;}

I'm able to do it with the text and I think that's due to the text field width being as long as the text itself. What I can't figure out is how to include in the string, width for the black box as well as keeping the float..

Apologies if I'm being vague, I kind of don't know how to explain it properly.

Regards,
Jordan

edbr
12-12-2014, 08:41 AM
is it live? when yu say text fields do you mean form elements or divs??

edbr
12-12-2014, 08:50 AM
does this help??<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style>
.box{ width: 300px; float:left; border:#000 solid 2px;}


</style>
</head>

<body>
<div class="box">kgggggggggggggggggggggggggggggggggggg</div>
<div class="box">kgggggggggggg<br>
<br>
gggggggggggggggggggggggg</div><div class="box">kggggggggggggg<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
ggggggggggggggggggggggg</div>
</body>
</html>

jmgravell
12-12-2014, 09:04 AM
does this help??<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style>
.box{ width: 300px; float:left; border:#000 solid 2px;}


</style>
</head>

<body>
<div class="box">kgggggggggggggggggggggggggggggggggggg</div>
<div class="box">kgggggggggggg<br>
<br>
gggggggggggggggggggggggg</div><div class="box">kggggggggggggg<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
ggggggggggggggggggggggg</div>
</body>
</html>

That's it! Brilliant, thank you very much! I'll look at the code and try to figure out what I was doing wrong.

Here is the code I used - I've just put all examples in one snippet:
<p><div class="boxed" style="border:solid 2px #000" float:left; width><br>
**This text is enclosed in a box.</div>
</p>

<div style="border:solid #000 2px" float:left;> Text Here </div>

<div style="border:solid #000 2px" float:left;> Text Here 2 </div> <div style="float:left" style="border:#000 2px">

<div style="border::#000 2px>
<p>Can this work?
</style></div>

</p>
<p>&nbsp;</p>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<p>
<style>
.box{ width: 300px; float:left; border:#000 solid 2px;}


</style>
</head>

<body>

edbr
12-12-2014, 09:09 AM
try not to use inline styles

jmgravell
12-12-2014, 09:48 AM
Will do :)

Thanks again.