Div float problem and opening menu-div z-index problem

HTML & CSS
1

Hi, I’m really in trouble with divs.
smaller divs won’t line up properly.their parent div is 1200px width.Each of them are 390px width and 5px margined.I want 3 of them for each line but they do 2-dived lines.If we do the math, 3390 + 45=1190. so they should fit.
when i use float:left they line up properly but this time the container div doensn’t wrap them.

Please help me get out of this mess… :tired_face: :tired_face:

here’s my code:

html,body{height:100%;margin:0;padding:0;
}

.container{margin:auto;
width:1200px;
min-height:100%;
background-color:red;}

.menu{z-index:2;
	position:sticky;
	top:0;
	width:1200px;
	height:100px;}
	
.menu ul{
	margin:0px;
	padding:0px;}
	
.menu ul li{
		float:left;
		width:400px;
		line-height:50px;
		list-style-type:none;}
	
.menu ul li a{
	background-color:pink;
	text-decoration:none;
	text-align:center;
	display:block;
}

.menu ul li ul{display:none;}

.menu ul li:hover ul {
	display:block;}

.content{z-index:1;
position:absolute;

	width:1200px;
	padding:0;}
	
.div1{
	display:inline-block;
	width:390px;
	height:350px;
	margin:5px;
position:relative;

	background-color:blue;}
	
.footer{
	width:1200px;
	height:150px;
	margin:auto;
	background-color:orange;
}

<head>
<title>divs</title>

<link rel="stylesheet" type="text/css" href="divs.css">
</head>


<body>

<div class="container">

	<div class="menu">
	<ul>
		<li><a href="">z</a></li>
		
		<li><a>x</a>
			<ul>	<li><a href="" >x1</a></li>
					<li><a href="" >x2</a></li>
					<li><a href="" >x3</a></li>
			</ul> 
		</li>
		<li><a href="" >y</a></li>
	</ul>
	</div>
	
	<div class="content">
		
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt leo non
		mauris rutrum, eget pretium nunc scelerisque. Aenean tincidunt id magna sit amet 
		laoreet. Donec vehicula libero at elementum auctor. Morbi pretium placerat risus, 
		sed semper nibh porttitor eu. Donec ante metus, convallis eu turpis vitae, sagittis
		blandit ex. Maecenas eu mauris sed magna tempus rhoncus. Nulla tristique tempus 
		condimentum. Nunc ultrices iaculis tellus at eleifend. Vivamus mollis magna ut 
		tellus hendrerit volutpat vitae eu lacus. Duis quis malesuada dui, at gravida nisl.
		Curabitur vestibulum nec arcu nec tempus. Nam molestie quam in molestie varius.
		Duis dapibus dolor et libero consectetur, sed dignissim augue viverra. Etiam tempus
		dignissim ipsum ac elementum.
<br><br><br><br>
		Curabitur ac dolor rutrum, mollis lacus eu, interdum magna. Pellentesque efficitur 
		dui enim, sed elementum quam egestas a. Pellentesque vel condimentum ante. 
		Suspendisse magna felis, eleifend a mollis et, bibendum vel mauris. Integer vel quam
		scelerisque ipsum bibendum lacinia. Donec pulvinar eros quis fermentum interdum. Cras
		eleifend, nisi ut sollicitudin blandit, justo justo consequat magna, ac sagittis tortor
		nunc in felis. Donec vestibulum pulvinar leo, sed euismod risus mattis in. Nullam 
		interdum vitae risus id luctus. Vivamus rhoncus maximus nunc.
	</div>


	<div class="div1"></div>	
	<div class="div1"></div>
	<div class="div1"></div>
	<div class="div1"></div>
	<div class="div1"></div>
	<div class="div1"></div>
	<div class="div1"></div>
	<div class="div1"></div>
	<div class="div1"></div>
	<div class="div1"></div>

</div>
<div class="footer"></div>
</body>
</html>
2

It seems to me that flexbox might be the answer here. Have you tried that yet?

1 Like
3

Looks to me like you are in trouble with layout strategy in general.

Delete {position:absolute} from .content.
Add {overflow:hidden} to `.container {.container}.

Usually fixed heights are to be avoided as is position:absolute for significant portions of the page. The div1s are set to inline-blocks which adds a space after and beneath them just like words in a sentence. There are techniques to eliminate that space - using a flex container is best. The choices of CSS properties depends on what you ultimately want.

Why don’t you draw a picture of what you wish and we can help you get there.

Otherwise take another class in HTML and CSS.

4

Take my hand, you’re a stranger in paradise. :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html, body{
    height: 100%;
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

#container{
    max-width: 75em;
    margin: auto;
    background-color: #f66;
 }
	
#menu {
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 3em;
	 background-color: #ffc0cb;
 }
	
#menu li {
    position: relative;
	 background-color: #fff;
}

#menu li[tabindex="1"] {
    padding: 0 1em;
    cursor: pointer;
 }	

#menu a {
    display: block;
    padding: 0 1em;
    color: #000;
	 text-decoration: none;
	 text-align: center;
}

#menu ul {
    position: absolute;
    min-width: 100%;
    display: none;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

#menu li:focus ul,
#menu li:hover ul,
#menu li:active ul{
	display: block;
 }

#content{
	padding: 2em;
 }
		
#footer{
    padding: 2em;
	 background-color: #ffa500;
    text-align: center;
 }
</style>

</head>
<body> 

<div id="container">

 <ul id="menu">
  <li><a href="#">link one</a></li>
  <li tabindex="1">catogory
   <ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
   </ul></li>
  <li><a href="#">link 1</a></li>
 </ul>

<div id="content">

 <p>		
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt leo non
  mauris rutrum, eget pretium nunc scelerisque. Aenean tincidunt id magna sit amet 
  laoreet. Donec vehicula libero at elementum auctor. Morbi pretium placerat risus, 
  sed semper nibh porttitor eu. Donec ante metus, convallis eu turpis vitae, sagittis
  blandit ex. Maecenas eu mauris sed magna tempus rhoncus. Nulla tristique tempus 
  condimentum. Nunc ultrices iaculis tellus at eleifend. Vivamus mollis magna ut 
  tellus hendrerit volutpat vitae eu lacus. Duis quis malesuada dui, at gravida nisl.
  Curabitur vestibulum nec arcu nec tempus. Nam molestie quam in molestie varius.
  Duis dapibus dolor et libero consectetur, sed dignissim augue viverra. Etiam tempus
  dignissim ipsum ac elementum.
 </p><p>
  Curabitur ac dolor rutrum, mollis lacus eu, interdum magna. Pellentesque efficitur 
  dui enim, sed elementum quam egestas a. Pellentesque vel condimentum ante. 
  Suspendisse magna felis, eleifend a mollis et, bibendum vel mauris. Integer vel quam
  scelerisque ipsum bibendum lacinia. Donec pulvinar eros quis fermentum interdum. Cras
  eleifend, nisi ut sollicitudin blandit, justo justo consequat magna, ac sagittis tortor
  nunc in felis. Donec vestibulum pulvinar leo, sed euismod risus mattis in. Nullam 
  interdum vitae risus id luctus. Vivamus rhoncus maximus nunc.
</p>

<!-- #content --></div>

 <div id="footer">&copy; This is the footer content</div>

<!-- #container --></div>

</body>
</html>

coothead

1 Like
5

My submission.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>layout problem</title>
<!--
https://www.sitepoint.com/community/t/div-float-problem-and-opening-menu-div-z-index-problem/305393
nilufertek316
Aug 29,2018 5:54 AM
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}

html,body {
    padding:0;
    margin:0;
}
.container {
    max-width:1200px;
    background-color:pink;
    margin:auto;
}
.menu {
    position:sticky;
    top:0;
    z-index:1;
}
.menu ul {
    list-style:none;
    display:flex;
    padding:0;
    margin:0;
}
.menu ul li {
    flex-basis:33.33%;
    line-height:3;
    position:relative;
}
.menu ul li a,
.menu ul li span {
    color:#fff;
    display:block;
    text-align:center;
    background-color:rgba(255,0,0,.7);  /* rgba used for demo; hex is OK */
    text-decoration:none;
}
.menu ul li a:hover,
.menu ul li a:active {
    box-shadow:0 0 3px 3px #fff inset;
}
.menu ul li ul {
    display:block;
    position:absolute;
    width:100%;
    left:-999em;
}
.menu ul li:hover ul,
.menu ul li:active ul {
    left:0;
}
main p {
    padding:0 .5em;
    margin:1em 0;
}

.parent {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
    padding:.25em;
/*    outline:1px dashed blue;  /* for test purposes only. to be deleted. */
}
.child {
    display:flex;
    min-height:1em;  /* for test purposes only. to be deleted. */
    flex:0 1 33.33%;    /* flex-grow disabled - items in last row retain width of previous items *//* CHOOSE ONE... */
/*    flex:1 1 33.33%;  /* flex-grow enabled - items in last row extend to fill width of row */
    padding:.25em;  /* space around .childwrap boxes */
    margin:0;
}
.childwrap {
    flex:0 1 100%;
    text-align:center;
    background-color:rgba(255,255,0,.25);
    border:1px solid gray;  /* optional. */
    padding:0 .5em;  /* space inside .childwrap box */
}

.footer {
    min-height:1em;  /* for test purposes only. to be deleted. */
    background-color:gray;
    padding:1em;
    margin:0 auto;
}

@media screen and (max-width:900px) {
    .child {flex-basis:50%;}
}
@media screen and (max-width:500px) {
    .child {flex-basis:100%;}
}
    </style>
</head>
<body>

<div class="container">
    <div class="menu">
        <ul>
            <li><a href="">z</a></li>
            <li><span>x</span>
                <ul>
                    <li><a href="">x1</a></li>
                    <li><a href="">x2</a></li>
                    <li><a href="">x3</a></li>
                </ul>
            </li>
            <li><a href="">y</a></li>
        </ul>
    </div>
    <main>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt leo non
            mauris rutrum, eget pretium nunc scelerisque. Aenean tincidunt id magna sit amet
            laoreet. Donec vehicula libero at elementum auctor. Morbi pretium placerat risus,
            sed semper nibh porttitor eu. Donec ante metus, convallis eu turpis vitae, sagittis
            blandit ex. Maecenas eu mauris sed magna tempus rhoncus. Nulla tristique tempus
            condimentum. Nunc ultrices iaculis tellus at eleifend. Vivamus mollis magna ut
            tellus hendrerit volutpat vitae eu lacus. Duis quis malesuada dui, at gravida nisl.
            Curabitur vestibulum nec arcu nec tempus. Nam molestie quam in molestie varius.
            Duis dapibus dolor et libero consectetur, sed dignissim augue viverra. Etiam tempus
            dignissim ipsum ac elementum.
        </p>
        <p>
            Curabitur ac dolor rutrum, mollis lacus eu, interdum magna. Pellentesque efficitur
            dui enim, sed elementum quam egestas a. Pellentesque vel condimentum ante.
            Suspendisse magna felis, eleifend a mollis et, bibendum vel mauris. Integer vel quam
            scelerisque ipsum bibendum lacinia. Donec pulvinar eros quis fermentum interdum. Cras
            eleifend, nisi ut sollicitudin blandit, justo justo consequat magna, ac sagittis tortor
            nunc in felis. Donec vestibulum pulvinar leo, sed euismod risus mattis in. Nullam
            interdum vitae risus id luctus. Vivamus rhoncus maximus nunc.
        </p>
    </main>
    <section class="parent">
        <div class="child">
            <div class="childwrap">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt leo non mauris rutrum, eget pretium nunc scelerisque. Aenean tincidunt id magna sit amet laoreet.</p>
            </div>
        </div>
        <div class="child">
            <div class="childwrap">
                <p>Donec dapibus orci sit amet elit. Maecenas rutrum ultrices lectus. Aliquam suscipit, lacus a iaculis adipiscing, eros orci pellentesque nisl, non pharetra dolor urna nec dolor. Integer cursus dolor vel magna. Integer ultrices feugiat sem.</p>
            </div>
        </div>
        <div class="child">
            <div class="childwrap">
                <p>Proin nec nibh. Duis eu dui quis nunc sagittis lobortis. Fusce pharetra, enim ut sodales luctus, lectus arcu rhoncus purus, in fringilla augue elit vel lacus. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce iaculis elit id tellus. Ut accumsan malesuada turpis. Suspendisse potenti.</p>
            </div>
        </div>
        <div class="child">
            <div class="childwrap">
                <p>Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula.</p>
            </div>
        </div>
        <div class="child">
            <div class="childwrap">
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.</p>
            </div>
        </div>
    </section>
    <div class="footer"></div>
</div>

</body>
</html>

The menu probably needs to be improved to work with touch devices.

(Everyone, please feel free to slice and dice.)

4 Likes
6

thanks everybody, I’m quite a new to this and I didn’t even heard what flex is before.(Worked btw)

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.