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
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%;
}
I just started learning CSS, now stuck at this part. what makes the brand class to move down when information class is inline-block-ed? Doesn't information comes after brand so it shouldn't affect the brand class?
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF
</div>
<div class="information">
</div>
</div>
<div class="mainbody">
</div>
By default the vertical-alignment of text is baseline. The difference in the height is what makes it. If you have this CSS rule:
vertical-align: top;
Or whatever it is perfect, it looks alright. See below:
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
vertical-align: top;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div>
<div class="information"></div>
</div>
<div class="mainbody">
</div>
And now the difference or the white line is because of the border, which can be made by using box-sizing: border-box.
* {
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
vertical-align: top;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div>
<div class="information"></div>
</div>
<div class="mainbody">
</div>
If a user is signed up to my site, in their login area I have 3 divs as follows:
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
These divs all have a width of 32% and sit inline with each other.
#psts-cancel-link {
background: white;
border-left: 3px solid #ccc;
padding: 1em;
width: 32%;
min-height: 270px;
float: left;
}
.psts-receipt-link {
background: white;
border-left: 3px solid #ccc;
min-height: 270px;
float: left;
width: 32%;
margin: 0 10px;
padding: 20px;
}
#psts-signup-another {
background: white;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
width: 32%;
min-height: 270px;
float: left;
}
When a user is not signed up, only one of the divs displays:
<div id="psts-signup-another"></div>
Is it possible to change the styling of this so that it's width is 100% when div1 and div2 aren't displayed?
So far I have tried this, but with no success:
#psts-cancel-link ~ .psts-receipt-link ~ #psts_existing_info #psts-signup-another {
width:100%;
}
Table Layout Implementation
Use a table layout. Specify display: table on the parent and display: table-cell on the child elements.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
display: table-cell;
word-wrap: break-word;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.container {
display: table;
width: 100%;
table-layout: fixed;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
Flexbox Layout Implementation
You can also use flexbox which expands and shrinks the child items according to the parent container.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
flex: 1;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
flex: 1;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
flex: 1;
}
.container {
display: flex;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
You could simply use :first-child if it's indeed the only child in the second case.
#psts-signup-another:first-child {}
You can use the adjacent selector. Have a look at the following snippet:
#psts-signup-another {padding: 5px; background: #f99;}
div + div + #psts-signup-another {padding: 5px; background: #99f;}
<h2>Div when three divs are present</h2>
<div class="theDivs">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
<h2>Div when three divs are not present</h2>
<div class="theDivs">
<div id="psts-signup-another"></div>
</div>
i think you should use another container div with a new class when user logout.
Logged:
<div class="container">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logout:
<div class="container logout">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
CSS:
.container.logout > div {
display:none;
}
.container.logout > .psts-signup-another {
display:block;
}