Click here to Skip to main content
15,557,873 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a bunch of elements that I want to contain in a box so I do something like this

HTML
<pre><html>
    <head>
        <link rel="stylesheet" href="styleTest.css">
    </head>
    <body>
        <div class="tableSection newLine borderBlack">    
            <span><figure class="number box-33 black fig" id='33'><div class="float">1</div></figure></span>
            <span><figure class="number box-36 red figNext" id='36'><div class="float">2</div></figure></span>
            <span><figure class="number box-36 red fig" id='36'><div class="float">3</div></figure></span>
            <span><figure class="number box-2 black fig" id='2'><div class="float">4</div></figure></span>
        </div>
    </body>
</html>



CSS
.red { background: red; 
       color: white;}
.black { background: black; 
         color: white;}

.number { display: table;
          height: 45px;
          width: 34px;
          position: relative;}
.fig { margin:0px; 
       padding: 0px; 
       float: left;
       border: 1px solid rgb(255, 255, 255);}
.figNext { margin:0px; 
           padding:0; 
           float: none;
           border: 1px solid rgb(255, 255, 255);}
.newLine {border-style: solid;
  border-width: 1px;
  border-color: blue;
  display: block;}
.tableSection { margin-left: 10%;}
.borderBlack { border: 1px solid rgb(215, 14, 14);}



If I put a border around the the div, the stuff is outside the box. What is the purpose of the div, if it doesn't hold the stuff? I want to be able to position the box without having to mess with positioning of stuff in the box. How do I get the div to surround the stuff?

What I have tried:

I tried height: auto and height: 100%, but that took up the entire page. Maybe I am using the wrong kind of container?
Posted
Updated 12-Oct-22 0:06am
v5

You did something wrong in your styling. The text is INSIDE the box. Since you didn't show the styling you used for the DIV, it's pretty much impossible to say what you did wrong.

This works as expected:
HTML
<html>
<head></head>
<body>
    This is the 1st line
    <div style="
        border-style: solid;
        border-width: 1px;
        border-color: blue;
        display: block;
    ">
        This is a test...
    </div>
    This is the 3rd line
</body>
</html>
 
Share this answer
 
After your update...

The DIV works as expected. What's screwing up the formatting is your styling on the fig and fixnext styles. In your .fig and .figNext classes, change the "float:left" to "float:none" and watch what happens. Then change them both to "float:left" and look again.

I have no idea what you want this to do, so it's difficult to say what you need to change.
 
Share this answer
 
Comments
Member 8428760 11-Oct-22 23:36pm    
I updated the code to show 4 boxes. I need them to align like they are, but also be inside the red div box. I will be adding another row of boxes as well, so this just a test to see how it is done. I tried what you suggested, but either all the boxes are on one line, or they are each on their own line.
The position:relative takes the element out of the document flow. That means the container element no longer "contains" the positioned element.

position - CSS&colon; Cascading Style Sheets | MDN[^]

I suspect you'd have better luck using Grid layout:
CSS Grid Layout - CSS&colon; Cascading Style Sheets | MDN[^]
A Complete Guide to Grid | CSS-Tricks - CSS-Tricks[^]

Eg:
HTML
<div class="number-grid">
	<figure class="black">
		<div>1</div>
	</figure>
	<figure class="red">
		<div>2</div>
	</figure>
	<figure class="red">
		<div>3</div>
	</figure>
	<figure class="black">
		<div>4</div>
	</figure>
</div>
CSS
.number-grid {
	border: 1px solid red;
	margin-left: 10%;
	display: grid;
	grid-template-columns: 34px 34px;
	grid-template-rows: repeat(2, 45px);
}
.number-grid figure {
	margin: 0;
	padding: 0;
	border: 1px solid white;
}
.black {
	background-color: black;
	color: white;
}
.red {
	background-color: red;
	color: white;
}
Demo[^]
 
Share this answer
 
Comments
Member 8428760 12-Oct-22 14:41pm    
Thank you Richard. I have never used Grid Layout. I want my site to be mobile responsive, but not sure if I can do that with fixed width height on the boxes.
Richard Deeming 13-Oct-22 3:19am    
So long as the fixed width doesn't exceed the width of the target device's screen, you should be able to make it responsive.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900