Menu
Community /Pin to ProfileBookmark
@cootheadAug 25.2016 — #Hi there jeorge_kabbi,
[indent]
the CSS[color=navy][i]"display: flex"[/i][/color] might be a better option here,
especially if you want the left and right containers to
maintain the same height regardless of content. ?
[/indent]
[i]coothead[/i]
why those divs are not aligned
i have this simple page :
[CODE]<!DOCTYPE html>
<html lang=”en”>
<head>
<title>chapter 1 me!</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”style.css” rel=”stylesheet” type=”text/css”/>
</head>
<body>
<link rel=”stylesheet” href=”style.css”>
<div class=”upperdiv”>
some upper text
</div>
<div class=”parentdiv”>
<span class=”leftsidediv”>
<p>some in p 1some in p 1some in p 1some in p 1some in p 1some in p 1some in p 1some in p 1
some in p 1some in p 1some in p 1some in p 1some in p 1some in p 1some in p 1
</p>
<p>
some text in p2some text in p2some text in p2some text in p2some text in p2some text in p2
some text in p2some text in p2some text in p2some text in p2some text in p2some text in p2
some text in p2some text in p2some text in p2some text in p2
</p>
</span>
<span class=”rightsidediv”>
<h2>Newsletter</h2>
<p>some text in newsletter p some text in newsletter p some text in newsletter p
some text in newsletter p </p>
</span>
</div>
</body>
</html>
and css :
[CODE]
.leftsidediv
{
display : inline-block;
border : 1px solid black;
background-color: green;
width : 70%;
height : 400px;
margin : 5px;
padding : 5px;
}
.rightsidediv
{
display : inline-block;
border : 1px solid black;
background-color: green;
width : 25%;
height : 400px;
margin : 5px;
padding : 5px;
}
.parentdiv
{
background-color : grey;
border : 5px dashed blue;
}
.upperdiv
{
height : 400px;
border : 1px dashed blue;
}
the resulting divs are not aligned , the upper margin of one is positioned above the other. so why is that ?
[ATTACH=CONFIG]17277[/ATTACH]
[canned-message]attachments-removed-during-migration
Sign in
to post a comment5 Comments(s) ↴
0
@cootheadAug 25.2016 — #Hi there jeorge_kabbi,[indent]
the CSS
especially if you want the left and right containers to
maintain the same height regardless of content. ?
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>chapter 1 me!</title>
<link href="style.css" rel="stylesheet" media="screen">
<style media="screen">
h1 {
text-align:center;
}
#upper {
margin-bottom: 1em;
border : 0.06em dashed blue;
}
#parent {
display: flex;
padding:1% 0;
background-color : grey;
border : 0.3em dashed blue;
}
#leftside,
#rightside {
width : 71%;
margin : 0 1%;
padding : 1em;
border : 0.06em solid black;
box-sizing: border-box;
background-color: green;
}
#rightside{
width : 26%;
margin : 0 1% 0 0;
}
</style>
</head>
<body>
<h1>Chapter One</h1>
<div id="upper">some upper text</div>
<div id="parent">
<div id="leftside">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p><p>
Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra
purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum.
Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius,
nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique
varius ullamcorper.
</p>
</div>
<div id="rightside">
<h2>Newsletter</h2>
<p>
Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non
vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu.
Donec pulvinar orci enim.
</p>
</div>
</div>
</body>
</html>[/color][/indent]
[i]coothead[/i]