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>
Related
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%;
}
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
This might be an easy one. Below is a structure which I want to create:
But I always end up with either this:
Or this:
Here is my code:
HTML
.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
width: 25px;
height: 25px;
margin-bottom: 5px;
border: 3px solid black;
}
.newdiv6 {
width: 150;
height: 150;
border: 3px solid black;
}
.newdiv {
height: 250px;
width: 450px;
float: left;
border: 3px solid black;
}
.divwrapper {
float: left;
border: 3px solid blue;
}
.mainwrapper {
display: block;
}
<div class="mainwrapper">
<div class="newdiv"></div>
<div class="divwrapper">
<div class="newdiv2"></div>
<div class="newdiv3"></div>
<div class="newdiv4"></div>
<div class="newdiv5"></div>
</div>
</div>
<div class="newdiv6"></div>
This looks like the second image above (in my Chrome browser).
You can also reset the block formating context of the main container, so it minds inside and outside floatting elements.
here the simpliest is to add : overflow:hidden; since no size are involved
.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
width: 25px;
height: 25px;
margin-bottom: 5px;
border: 3px solid black;
}
.newdiv6 {
width: 150px;
height: 150px;
border: 3px solid black;
}
.newdiv {
height: 250px;
width: 450px;
float: left;
border: 3px solid black;
}
.divwrapper {
float: left;
border: 3px solid blue;
}
.mainwrapper {
display: block;
/* reset bfc */
overflow:hidden;
}
<div class="mainwrapper">
<div class="newdiv"></div>
<div class="divwrapper">
<div class="newdiv2"></div>
<div class="newdiv3"></div>
<div class="newdiv4"></div>
<div class="newdiv5"></div>
</div>
</div>
<div class="newdiv6"></div>
You need to clear the <div>. Use clear: both; on .newdiv6:
.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
width: 25px;
height: 25px;
margin-bottom: 5px;
border: 3px solid black;
}
.newdiv6 {
width: 150px;
height: 150px;
border: 3px solid black;
clear: both;
}
.newdiv {
height: 250px;
width: 450px;
float: left;
border: 3px solid black;
}
.divwrapper {
float: left;
border: 3px solid blue;
}
.mainwrapper {
display: block;
}
<div class="mainwrapper">
<div class="newdiv"></div>
<div class="divwrapper">
<div class="newdiv2"></div>
<div class="newdiv3"></div>
<div class="newdiv4"></div>
<div class="newdiv5"></div>
</div>
</div>
<div class="newdiv6"></div>
Also use px after the numbers, else it won't work.
Preview
I am trying to create a site with a frame that fills all the vertical space, e.g. becomes smaller and overflowing content becomes scrollable.
html and body height are set to 100vh and all of the boxes parents are set to 100%. I have not found another method and this results in every single parent being 100vh and ultimately the site overflowing.
What am I doing wrong?
I feel like a am just missing the right "position: " attributes...
<!DOCTYPE html>
<html>
<head>
<title>Pastebook</title>
<style type="text/css">
html,
body {
height: 100vh;
}
/*central panel*/
.central {
position: absolute;
width: 100%;
margin: 0 auto;
height: 100%;
border: 3px solid blue;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 970px;
height: 100%;
border: 3px solid yellow;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
height: 100%;
border: 3px solid lightgreen;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 5px solid gray;
font-size: 100%;
overflow: auto;
padding: 5px;
height: 100%
}
/*Example content*/
.content {
height: 100px;
background: lightgray;
margin: 5px;
}
</style>
</head>
<body>
<div class="central">
<div class="content">
central
</div>
<div class="middle">
<div class="content">
middle
</div>
<div class="contentPanel">
<div class="content">
content
</div>
<div class="clipboard">
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried some changing and this works
html,
body {
height: 100vh;
padding:0;
margin:0;
overflow:hidden;
}
/*central panel*/
.central {
position: absolute;
width: 100%;
margin: 0 auto;
height: 100vh;
border: 3px solid blue;
box-sizing: border-box;
overflow:scroll;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 970px;
border: 3px solid yellow;
box-sizing: border-box;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
border: 3px solid lightgreen;
box-sizing: border-box;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 3px solid gray;
box-sizing: border-box;
font-size: 100%;
overflow: scroll;
padding: 5px;
}
/*Example content*/
.content {
background: lightgray;
margin: 5px;
}
tell me if something doesn't work or if I did something wrong :)
edit: okay so I looked into it a bit further and you can
use flex boxes (which I do not like for no reason)
javascript(which is an even worse solution but also works)
css calc() function(I included this one at the bottom)
this will work better with a css addon that lets u use heights of
other elements inside the calc() function
html,
body {
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
/*central panel*/
.central {
width: 100%;
margin: 0 auto;
height: 100vh;
border: 3px solid blue;
box-sizing: border-box;
overflow: hidden;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 300px;
border: 3px solid yellow;
box-sizing: border-box;
height: calc(100vh - 55px);
overflow: hidden;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
border: 3px solid lightgreen;
box-sizing: border-box;
height: calc(100vh - 110px);
overflow: hidden;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 3px solid gray;
box-sizing: border-box;
overflow: scroll;
padding: 5px;
height: calc(100vh - 165px);
}
/*Example content*/
.content {
background: lightgray;
margin: 5px;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Pastebook</title>
</head>
<body>
<div class="central">
<div class="content">
central
</div>
<div class="middle">
<div class="content">
middle
</div>
<div class="contentPanel">
<div class="content">
content
</div>
<div class="clipboard">
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try
.central
{
overflow-y: auto;
}
Please help me center a div that does not have a predefined width, inside another div. Please see the code below (or on jsbin at http://jsbin.com/ufivif). Thanks.
EDIT: the problem is that I need the caption below the image to be aligned to the left edge of the image. So text-align: center on the container does not work for me.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
.container
{
border: 1px solid red;
padding: 5em;
position: relative;
}
.container img
{
border: 1px solid #333333;
padding: 1em;
}
.container .image
{
border: 1px solid green;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Telefunken_FuBK_test_pattern.svg/500px-Telefunken_FuBK_test_pattern.svg.png"/>
<div class="caption">test image</div>
</div>
</div>
</body>
</html>
A combination of display: inline-block; and text-align:center
http://jsbin.com/ufivif/5
body {
padding: 0;
margin: 0;
}
.container
{
border: 1px solid gold;
padding: 10px;
text-align: center;
}
.container .image
{
border: 1px solid silver;
padding: 10px;
display: inline-block;
text-align: left;
}
.container .image img
{
border: 1px solid #9C6963 ;
padding: 10px;
}
So you need the image centered and not the text here's a way to fix it.
<style>
.container
{
border: 1px solid red;
padding: 5em;
text-align: center;
}
.imageWrapper
{
display: inline;
}
.container .image
{
border: 1px solid green;
display: inline;
position: relative;
}
.caption
{
position: absolute;
left: 0px;
top: 0px;
padding: 1em;
}
</style>
<div class="container">
<div class='imageWrapper'>
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Telefunken_FuBK_test_pattern.svg/500px-Telefunken_FuBK_test_pattern.svg.png">
<div class="caption">Image Text</div>
</div>
</div>
</div>
While this doesn't get the borders to line up properly this does get the image centered and the text to the left of the image.
Try this:
div.image { margin: auto }
If you're only interested in centering on this one div, you can use the text-align: center in the parent:
#arbitrary
{
width: 750px;
border: 1px solid #000000;
text-align: center;
}
<div id="arbitrary">
<div id="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Telefunken_FuBK_test_pattern.svg/500px-Telefunken_FuBK_test_pattern.svg.png">
</div>
</div>
If you are trying to center .image div the Try using this CSS:
.container
{
overflow: hidden;
margin: 0 auto
}
.container .image
{
margin: 0 auto
}