This is a follow up to this question. I've tried to come up with a solution that allowed me to have in-line labels in a multi-column form, by reading some of the answers provided in the question mentioned above I realized that it was much more simpler than I originally had though, this is my prototype:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
margin: 10px 0px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
padding: 10px;
-moz-border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<p><label>Name:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
<div class="_20">
<p><label>Email:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
</div>
</div>
</body>
</html>
In theory this seems to work, but in practice all I get is this very weird result (in FF 3.5.6):
If I drop the p tags around the labels and input the result changes a bit:
What's wrong? Is there any hack I'm supposed to make use of?
How can I place the labels / inputs inside the box like they are supposed to?
I appreciate all input, thanks.
Try this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
margin: 10px 0px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
padding: 10px;
-moz-border-radius: 6px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<p><label>Name:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
<div class="_20">
<p><label>Email:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
</div>
</div>
</body>
</html>
BTW, Check this out: How to create perfect form Markup and style it with CSS
Here's one. The main thing is the clear:both; div at the bottom, but there are a few more things changed too.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
-moz-border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<label>Name:</label>
</div>
<div class="_30">
<input type="text" id="" />
</div>
<div class="_20">
<label>Email:</label>
</div>
<div class="_30">
<input type="text" id="" />
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
first of all you need to reset the padding and margins on the <p> elements
p,label{
padding:0;
margin:0
}
secondly, you are floating elements inside a block element without clearing them later... hence the overflow issue... here is a working version of the code http://jsbin.com/eheva3
Note: I have used the clearit method which requires extra markup
You can use either that or the "clearfix" method... google for "clearfix" to find out more
You should start with the simplest possible implementation that works and build whatever fancy styling you want up from there. Getting rid of all the extraneous tags, all you really need is:
<div class="box">
<div class="content">
<label>Name:</label>
<input type="text" />
</div>
</div>
You don't need to add more divs and paragraphs to get it to snap to a grid, just style the elements that are already there.
Related
I am trying to build a simple webpage using Bootstrap and D3, but I do not know how to get rid of all the whitespace at the bottom. I would like to get rid of it.
I have tried setting the min-height of the body and html to 100%, but it hasn't done anything. My code is here: https://github.com/eelegiap/thesis-code/tree/main/search
body {
padding-left: 3vh;
padding-top: 3vh;
padding-bottom: 20px;
}
#searchCol {
padding-left: 6vh
}
form {
width: 25%
}
#results {
padding-right: 10vh;
}
#resultsContainer {
max-height: 30%;
overflow-y: auto
}
.result {
padding-left: 4vh;
}
.poemResult {
cursor: pointer;
border-radius: 10px;
padding-left: 10px;
padding-top: 5px;
}
#poemContainer {
max-height: 30%;
overflow-y: auto;
}
#poemMeta {
padding-top: 10vh;
padding-left: 15vh;
padding-bottom: 5vh
}
#poemTxt {
padding-left: 15vh;
padding-bottom: 10vh;
}
.input-group {
max-width: 75%;
padding-bottom: 5vh
}
/* Tooltip text */
.titleTooltip .tooltiptext {
visibility: hidden;
position: absolute;
text-align: left;
width: fit-content;
height: fit-content;
padding: 2px;
padding-right: 15px;
font: 12px sans-serif;
background: #e5ffff;
border: 1px solid gray;
border-radius: 8px;
pointer-events: none;
z-index: 1;
}
.titleTooltip:hover .tooltiptext {
visibility: visible;
}
.token mark {
display: contents;
}
input,
.dropdown-toggle {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.searchBar {
min-height: 50px
}
#search {
background-color: lightsteelblue;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- MDB -->
<link rel="stylesheet" href="mdb5/css/mdb.min.css" />
<body>
<div class="container">
<br>
<div class="row">
<h2>Contemporary Russian Internet Poetry</h2>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row" id="poemContainer">
<div id="poemMeta"></div>
<div id="poemTxt"></div>
</div>
</div>
<div class="col-sm-6" id="searchCol">
<div class="row">
<div class="input-group">
<div class="form-outline flex-fill searchBar">
<input type="search" id="form1" class="form-control form-control-lg" />
<label class="form-label" for="form1">Search by keyword(s)</label>
</div>
<button type="button" id='search' class="btn searchBar">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="row" id="resultsContainer">
<div id="results"></div>
</div>
</div>
</div>
</div>
</body>
<!-- MDB -->
<script type="text/javascript" src="mdb5/js/mdb.min.js"></script>
<!-- embedding JS libraries -->
<!-- d3 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- own js files -->
<script src="js/main.js"></script>
<script src="js/text.js"></script>
<script src="js/searchResults.js"></script>
You are using padding-bottom: 20px; in your body. It created the bottom padding or some spaces in the down side of your websites.
You have to remove it.
To be honest, idk why this works, but I changed the max-height variables to pixel heights instead, and this fixed the trailing whitespace problem.
I would like to get this result below:
Example
My problem is that, I don't understand why my blocks are not centered correctly even with the propriety display: inline-block in my selector homebotblock1?
I tried this:
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</body>
</html>
You need to wrap the homebottxt1 and homebottxt2 text in its own <div> then wrap that <div> and the image in another <div> with the class homebotblock3.
Then add this CSS:
.homebotblock3 {
display: flex;
}
.homebotblock3 > div {
margin-left: 20px;
}
Modified Code
JSFiddle: https://jsfiddle.net/Zeraora/gefhov6b/
* {
margin: 0;
padding: 0;
}
.homebot {
background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
min-height: 500px;
display: inline-block width:100%;
}
.homebotbg {
background-color: rgba(255, 255, 255, 0.7);
min-height: 500px;
display: block;
width: 43%;
float: right;
padding: 100px 50px 50px 30px;
text-shadow: #fff 1px 1px 0px;
text-align: left;
}
.homebottit {
font-size: 24pt;
font-family: roboto;
color: #c22312;
text-transform: uppercase;
margin-bottom: 50px;
display: inline-block;
}
.homebotpad {
padding-left: 10px;
}
.homebottxt1 {
font-size: 16pt;
font-family: roboto;
color: #000;
}
.homebottxt2 {
font-size: 10pt;
font-family: open sans2;
color: #000;
}
.homebotblock1 {
width: 80px;
display: inline-block;
}
.homebotblock2 {
width: 450px;
display: inline-block;
}
.homebotblock3 {
display: flex;
}
.homebotblock3>div {
margin-left: 20px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="homebotblock3">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
.homebot{
background: url('https://zupimages.net/up/20/21/9zj3.jpg');
background-size: 100% auto;
background-position-x: center;
background-position-y: -100px;
height: 25vw;
display: block;
position: relative;
}
.homebotbg {
position: relative;
left: 40%;
width: 60%;
height: 100%;
background-color: rgba(255, 255, 255, .7);
padding: 10px 30px;
display: flex;
flex-direction: column;
align-content: flex-end;
}
.homebot-header {
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.homebottit {
color: red;
font-size: 24px;
}
.homebot-footer {
flex-basis: 50%;
display: flex;
align-items: center;
}
.homebotblock1 {
margin-right: 15px;
}
.homebottxt1 {
font-size: 18px;
margin-bottom: 5px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<div class="homebot-header">
<p class="homebottit">Security Investment Solutions</p>
</div>
<div class="homebot-footer">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebot-footer-right">
<p class="homebottxt1">ADVANTAGEOUS CONDITIONS</p>
<p class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can design like this.
The key point here is to use flex layout.
Using flex layout by display: flex, you can make this structure easily.
Since you are applying inline-block to the image separately, it is not horizontally aligning the image to any other element in the page.
To achieve your result, you will need to create a div structure that suits your needs and then apply your property.
Also, use flex instead of inline-block, it's much powerful. I have modified your code to achieve your result.
P.S. Kindly add in a padding as per your need. Since it is not the objective of the question, I have not included it in my answer.
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.block{
display: flex;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="block">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to reproduce a layout similar to Youtube to practice some of the things I've learned just recently. How can I reposition an embedded Youtube video?
I tried making a parent div for the embedded video with display: relative, but it's not budging.
http://jsfiddle.net/GztRt/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="bluetube.css" /> <title> Webpage #3 </title>
</head>
<body>
<div id="header"> <!-- Top header with logo, search bar, upload button-->
<a href="http://www.youtube.com" id="logo">
<div id="blue"> Blue</div>
<div id="tube">Tube</div>
</a>
<form style="display: inline; width: 200px;" name="searchbar" action="searchinput.asp" method="get">
Search <input type="text" name="searchinput">
<input type="submit" value="Submit">
</form>
<a href"http://www.amazon.com" id="uploadparent">
<div id="upload">Upload</div>
</a>
</div>
<div id="videobox">
<object width="420" height="315">
<param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ? hl=en_US&version=3"></param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ?hl=en_US&version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true">
</embed></object>
</div>
<div id="column_box_right"></div> <!-- Related Videos spans the Right side! -->
<div id="column_box_left>ddddddddddddddddddddddd</div> <!-- column spans the left side! -->
<div id="vidinfo"></div>
<div id="footer"></div>
CSS:
html body {
width: 100%;
}
#header {
height: 35px;
background-color: grey;
margin-top: -6px;
position: relative;
margin-left: -7px
overflow: auto;
min-width: 1000px;
}
#blue {
height: 35px;
width: 60px;
background-color: grey;
border-radius: 4px;
text-align: center;
color: blue;
display: inline-block;
font-size: 20px;
font-family: Verdana;
}
#logo {
float: left;
margin-right: 14%;
}
#tube {
height: 35px;
width: 60px;
background-color: blue;
border-radius: 4px;
text-align: center;
display: inline-block;
color: white;
font-size: 20px;
font-family: Verdana;
}
#upload {
height: 30px;
width: 100px;
}
You had an extra space in your #videobox div. Changing it from #video box to #videobox allowed the div to position correctly in your jsfiddle. I'm not sure if this is your issue on your site, but since most copy and paste, I figured I'd throw it out there.
This will move your videobox div where ever you want on the screen. This will move it to the center.
#videobox {
display: block;
height: 100%;
left: 25%;
position: absolute;
top: 25%;
width: 100%;
}
Hihi, I am trying to create a slide down menu using DIV, but hit a problem that I can't really figure out how to overcome. Let's take a look at the code below:
<!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" xml:lang="en">
<head>
<title>test</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu").click(function () {
$('#menuItem').slideDown('slow');
});
});
</script>
</head>
<body>
<div style="width: 500px; margin: 0px auto; padding: 10px;">
<div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center;">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" position: relative; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
All I want to achieve is to make my slide down menu stay on top of my form element div. Please advice how can this be done. Many thanks!
:)
Quick and dirty: I added an absolutely-positioned outer containing for the menu, and then applied top:40px to the content div to push it down to compensate for the height of the menu.
<div style="position:absolute;width:100%;">
<div style="width: 500px; margin: 0px auto; padding: 10px; ">
<div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
</div>
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center; position:relative; top:40px; ">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" clear:both; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
As I type this, dotty's already answered before me with a pretty much identical approach. However, in the code above, the individual menu divs are properly floating next to each other as you want them to, as they do in the first code you posted in the question.
There are probably some div and styling elements that are a little redundant there now.
Edit: It does occur to me now that the operation of the menu in dotty's code is actually probably how you intended for the menu to be.
Put the #menuItem div inside the #menu div, and set the #menuItem div's position to absolute and remove it's float.
<!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" xml:lang="en">
<head>
<title>test</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu").click(function () {
$('#menuItem').slideDown('slow');
});
});
</script>
</head>
<body>
<div style="width: 500px; margin: 0px auto; padding: 10px;">
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
<div id="menuItem" style="border: 1px solid blue; position: absolute; z-index: 10; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center;">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" position: relative; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
I want to achieve this:
I want to display boxes, one main box and below each box a smaller box as you can see in the picture. I define this with the following html structure:
<div class='content'>
<div class='box'>
<a>test</a>
<div class='money'><div id='maxnumber'>
<h3 id='max'>max</h3><h3 id='digit'>0000</h3>
</div></div>
<div id='numbereuro'><h3 id='digit2'></h3>
<h3 id='euro'></h3>
</div>
</div>
<div class='utility'>test</div>
</div>
Here is a working example that shows the result without the smaller box: http://jsfiddle.net/
.box names the bigger box and .utility the smaller box below bot wrapped in .content. I use the following css:http://jsfiddle.net/76fXa/
.content {
margin: 5px;
padding: 5px;
font-size: 11px;
float: left;
}
.utility{
position:relative;
height:50px; width:100px; background:red;
}
.box {
margin: 5px;
padding: 5px;
background: #BBE3A8;
font-size: 11px;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.box {
position: relative;
padding: 5px;
width: 180px; height:auto;
cursor:pointer;
}
and I get the following result: http://jsfiddle.net/76fXa/1/
any ideas?
How about this quick fiddle I just made for you.
http://www.jsfiddle.net/ozzy/F3K8k/
Both .box and .utility should be put in another floated div so that they both are constrained within. Just a simplified example
<div id="content">
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
</div>
(attempting to preserve your class names where practical)
You could then set the inner divs to display block so that they fill the constrained area and set a fixed width to section (I will use 50% for demo purposes)
.section
{float:left; width:50%;}
.box
{display:block;}
.utility
{display:block;}
Set the other style properties as needed, and remember the box model when adjusting padding and margins. Sometimes applying too much or too little of either can break off to a newline if something is set wrong.
From what you provided I can't see why position relative would be necessary. If it was intended as an attempt to make the layout you demonstrated then I'd suggest removing it, unless for some reason you are absolutely positioning something within that div relative to it.
EDIT: Didn't realize you had two content divs and a fiddle posted.
http://jsfiddle.net/76fXa/2/
#ArtWorkAD: Is this is how you want it?
<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
.content {
float: left;
font-size: 11px;
margin: 5px;
padding: 5px;
}
.utility {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: red;
border-radius: 5px;
clear: left;
cursor:pointer;
float: left;
font-size: 11px;
height: auto;
margin: 5px;
padding: 5px;
width: 180px;
}
.box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #BBE3A8;
border-radius: 5px;
cursor:pointer;
float: left;
font-size: 11px;
height: auto;
margin: 5px;
padding: 5px;
width: 180px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<a>test</a>
<div class="money">
<div id="maxnumber">
<h3 id="max">max</h3><h3 id="digit">0000</h3>
</div>
</div>
<div id="numbereuro"><h3 id="digit2"></h3>
<h3 id="euro"></h3>
</div>
</div>
<div class="utility">test</div>
</div>
</body>
</html>
http://jsfiddle.net/9Ugww/