I've got a group of three elements. Section, that contain a header and a div element. Now what I want to do is to add another div element within the div element, but when I do that both elements move down (dislocate from when they supposed to be).
HTML:
<div class="main"><!-- main container -->
<section class="head"><!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">Damian</h> Tuszynski<br>
Network Solutions Architect
<p>
Mobile<br>
</p>
<p>
Email<br>
</p>
</div>
</div>
</section><!-- header section -->
</div>
CSS, for the header group:
.head {
border: 1px solid green;
white-space: nowrap;
width:1900px;
height:900px;
}
.img_header {
border: 1px solid black;
display: inline-block;
width: 600px;
height: 900px;
background-color: #E8E2E2;
position: relative;
}
#head_container {
border: 1px solid orange;
display: inline-block;
width: 1250px;
height: 900px;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
display: block;
margin-top: 300px;
margin-left: 280px;
position: relative;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
position: relative;
display: block;
}
.mark {
color: #A1E3D8;
}
what am I missing here?
.head {
border: 1px solid green;
white-space: nowrap;
width:1900px;
height:900px;
}
.img_header {
border: 1px solid black;
display: inline-block;
width: 600px;
height: 900px;
background-color: #E8E2E2;
position: relative;
}
#head_container {
border: 1px solid orange;
display: inline-block;
width: 1250px;
height: 900px;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
display: block;
margin-top: 300px;
margin-left: 280px;
position: relative;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
position: relative;
display: block;
}
.mark {
color: #A1E3D8;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<section class="head"><!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">John</h> Snow<br>
Network Solutions Architect
<p>
Mobile<br>
</p>
<p>
Email<br>
</p>
</div>
</div>
</section><!-- header section -->
</body>
When you are making both header and div as inline-block they should be side-by-side ,but as you adding an image in the header the next div is moving . The best way to do this is to use display:flex
check this snippet
.head {
border: 1px solid green;
white-space: nowrap;
width: 1900px;
height: 900px;
display: flex;
}
.img_header {
border: 1px solid black;
width: 600px;
height: 900px;
background-color: #E8E2E2;
}
#head_container {
border: 1px solid orange;
width: 1250px;
height: 900px;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
display: block;
margin-top: 300px;
margin-left: 280px;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
position: relative;
}
.mark {
color: #A1E3D8;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<section class="head">
<!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">John</h>Snow
<br>Network Solutions Architect
<p>
Mobile
<br>
</p>
<p>
Email
<br>
</p>
</div>
</div>
</section>
<!-- header section -->
</body>
Solution without flex,is to use display:table and make every content within it as display:table-cell
check this snippet
.head {
border: 1px solid green;
white-space: nowrap;
width: 1900px;
height: 900px;
display: table;
}
.img_header {
border: 1px solid black;
display: table-cell;
width: 600px;
height: 900px;
background-color: #E8E2E2;
}
#head_container {
border: 1px solid orange;
display: table-cell;
width: 1250px;
height: 900px;
vertical-align: top;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
margin-top: 300px;
margin-left: 280px;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
}
.mark {
color: #A1E3D8;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<section class="head">
<!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">John</h>Snow
<br>Network Solutions Architect
<p>
Mobile
<br>
</p>
<p>
Email
<br>
</p>
</div>
</div>
</section>
<!-- header section -->
</body>
Hope this helps
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I wanted to have 3 divs side by side in a HTML document and I managed to achieve it where it looks something like this:
But whenever I tried adding objects such as text or any other objects, the div is always shifting down:
Could anyone help me out on this?
Edit
Thanks for the response but i forgot that i wanted a logo at the top left, then followed by the 3 divs below the logo, but adding "flex" property to the container leads to this:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
display: flex;
border: 1px solid black;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
<!--
this is the outermost shell
-->
<div class="container">
<!-- to add a logo at the top left -->
<div class = "sun_lg">
<img src = "images/sun.png" height = "50">
</div>
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>
Just add display:flex to your container.
To learn more about flexbox read the documentation.
You can also use grid
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
border: 1px solid black;
display: flex;
flex-direction:column;
/* new */
}
.wrapper{
width: 100%;
height:auto;
display: flex;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
/* update for logo */
.sun_lg {
border: 1px solid #000;
flex: 1 1 100%;
}
<div class="container">
<!-- to add a logo at the top left -->
<div class="sun_lg">
<img src="https://via.placeholder.com/50x50" height="50">
</div>
<div class="wrapper">
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>
</div>
Define vertical-align to set the exact behavior of divs against texts baseline. I will use vertical-align:top in all child divs:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
border: 1px solid black;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
vertical-align:top;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
vertical-align:top;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
vertical-align:top;
}
<!--
this is the outermost shell
-->
<div class="container">
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>
I want to center horizontally a div but it works in Google Chrome but in IE not work.
This is my code:
.app-content {
width: 100%;
height: calc(100%);
position: relative;
}
.pagination--custom {
width: fit-content;
margin: 0 auto;
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
height: 50px;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
fit-content is experimental and won't work in ie or edge: https://developer.mozilla.org/en-US/docs/Web/CSS/width.
Make it display: inline-block instead and put text-align: center on the parent
.app-content {
width: 100%;
height: calc(100%);
position: relative;
text-align:center;
}
.pagination--custom {
display:inline-block;
margin: 0 auto;
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
width: 50px;
height: 50px;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
Try This: Tested its working!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.pagination--custom {
width: 50px;
height: 50px;
border: 1px solid #000;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
</body>
</html>
JUST SET margin: 0 auto; for pagination
Your margin: 0 auto; has to be on .pagination and remove width: fit-content;.
.app-content {
width: 100%;
height: calc(100%);
position: relative;
}
.pagination--custom {
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
width: 50px;
height: 50px;
margin: 0 auto;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
The below diagram was given to me in an interview questions and the interviewer told me that I am missing clear:both in my code.
I tried something like this. But couldn't get the desired results
.name3 {
border: 1px solid black;
height: 50px;
width: 90px;
}
.name {
border: 1px solid black;
height: 10px;
width: 90px;
}
.name1 {
border: 1px solid black;
height: 40px;
width: 30px;
}
#name2 {
border: 1px solid black;
height: 20px;
width: 30px;
float: left;
}
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
</div>
</body>
Try this
.name3 {
border: 1px solid black;
height: 55px;
width: 100px;
float: left;
}
.name {
border: 1px solid black;
height: 10px;
width: 99px;
float: left;
}
.name1 {
border: 1px solid black;
height: 42px;
width: 34px;
float: left;
}
#name2 {
border: 1px solid black;
height: 20px;
width: 30px;
float: left;
}
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
</div>
</body>
I tried to reproduce this with Flexbox.
Here you can learn more: https://www.w3schools.com/css/css3_flexbox.asp
.top,.side,.square {
padding: 5px;
box-sizing: border-box;
border: 1px solid black;
}
.container {
display: flex;
flex-direction: column;
width: 200px;
}
.container .main {
display: flex;
flex-direction: row;
max-width: 200px;
}
.container .main .content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container .main .content .square {
width: 50%;
}
<div class="container">
<div class="top">.top</div>
<div class="main">
<div class="side">.side</div>
<div class="content">
<div class="square">.square</div>
<div class="square">.square</div>
<div class="square">.square</div>
<div class="square">.square</div>
</div>
</div>
</div>
Hi SIMIN i have read your question and here is my solution to that. Copy past the code below in your editor. Also note that i was using opera browser for running this code, so if you are using different browser there may be a little difference in output. Good luck
<html>
<head>
<style>
.name3{
border: 1px solid black;
height: 53px;
width: 93px;
}
.name{
border: 0.5px solid black;
height: 10px;
width: 92px;
float: left;
}
.name1{
border: 0.5px solid black;
height: 41px;
width: 30px;
float: left;
clear: left;
}
#name2one{
height: 20px;
width: 30px;
border: 0.5px solid black;
float: left;
clear: none;
}
</style>
</head>
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2one"></div>
<div id="name2one"></div>
<div id="name2one"></div>
<div id="name2one"></div>
</div>
</body>
</html>
How about using percentage in width
<div class="wrapper">
<div class="header"></div>
<div class="sidebar"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
.wrapper, .header, .sidebar, .article{
border: 1px solid black;
float: left;
}
.wrapper {
height: 100px;
width: 100px;
}
.header{
width: 100%;
height: 20px;
}
.sidebar {
height: 80px;
width: 33.33%;
}
.article {
height: 40px;
width: 33.33%;
}
So my problem is pretty simple. I am creating a report that can be anywhere from one to 100 pages roughly. it is variable based on multiple factors. What I am having issues with is that I need to have a set footer on EVERY page. I can get the footer to sit where I need it to and look the way I want. HOWEVER, the div's I am using to display my content overflow behind my footer. So my question is simply how to I for any content that does not fit in the content div to overflow on the next page and not simply to fill the printable space? is this even possible?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: #fff;
margin: 0px;
height: 278mm;
margin-bottom: 20mm;
}
.page {
width: 217mm;
height: 268mm;
}
footer {
bottom: 0;
height: 10mm;
background: black;
color: white;
width: 200mm;
position: fixed;
}
.whiteBox {
min-height: 5mm;
height: auto;
font-size: 3mm;
line-height: 2;
border-left: 1px solid #a95346;
border-bottom: 1px solid #a95346;
color: #000;
letter-spacing: 0.1mm;
float: left;
display: inline-block;
text-align: center;
}
.content {
width: 217mm;
height: 250mm;
font-family: 'Verdana';
display: inline-block;
background: #fff;
float: left;
}
.pb {
page-break-before: always;
}
#media print {
body {
background-color: #fff;
margin: 0px;
height: 278mm;
margin-bottom: 20mm;
}
.page {
width: 217mm;
height: 268mm;
}
footer {
bottom: 0;
height: 10mm;
background: black;
color: white;
width: 200mm;
position: fixed;
}
.whiteBox {
min-height: 5mm;
height: auto;
font-size: 3mm;
line-height: 2;
border-left: 1px solid #a95346;
border-bottom: 1px solid #a95346;
color: #000;
letter-spacing: 0.1mm;
float: left;
display: inline-block;
text-align: center;
}
.content {
width: 217mm;
height: 250mm;
font-family: 'Verdana';
display: inline-block;
background: #fff;
float: left;
}
.pb {
page-break-before: always;
}
}
</style>
</head>
<body>
<div class="page" style="border: 1px dotted;">
<div class="content" style="border: none">
<div class="whiteBox" style="width: 217mm; border: none;">
<div class="whiteBox" style="width: 217mm; border: none">Text ...</div>
<div class="whiteBox" style="width: 217mm; border: none">Text ...</div>
<div class="whiteBox" style="width: 217mm; border: none">Text ...</div>
</div>
</div>
<div class="pb"></div>
<div class="whiteBox" style="width: 217mm; border: none;">
<footer>
<p>Posted by: Hege Refsnes</p>
</footer>
</div>
</div>
</body>
</html>
I'm trying to build a 3 column div and center all of them inside a wrapper but the div.left and div.right wont stay at the top when the div.middle has text in & when i replace display: inline-block to float: left they stop centering, what could i do so they all center and stay at the top?
example
the html:
<div class="left">
</div>
<div class="middle">
example <p>
example <p>
example <p>
example <p>
example <p>
example <p>
example <p>
</div>
<div class="right">
</div>
</div>
</body>
the css:
.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
img {
width: 200px;
height: 200px;}
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
}
div.middle {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 60%;
padding: 1px;
background: red;
}
Try using vertical-align
Working Example
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
vertical-align: top; /* see here */
}
MDN documentation for vertical-align
Just do vertical-align: top; on the left/right like this:
http://jsfiddle.net/RJR2V/2/
But if you want them to be even in heights than I suggest display: table-cell;
Like this:
http://jsfiddle.net/RJR2V/1/
under .wrapper all div should be vertical-aligned to top
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
img {
width: 200px;
height: 200px;
}
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
}
div.middle {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 60%;
padding: 1px;
background: red;
}
.wrapper div{
vertical-align:top;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="middle">
example <p>
example
<p>
example
<p>
example
<p>
example
<p>
example
<p>
example
<p>
</div>
<div class="right">
</div>
</div>
</body>
</html>