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%;
}
Related
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>
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
So, whenever there is content inside the boxes, they align weird and not side by side. How do i fix this? Ive tried quite alot and i havent been able to figure it out.
Any help here would be greatly appreciated/
So i have This as my main code:
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>
Add box-sizing: border-box; at ".donator-box"
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
box-sizing: border-box;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is.
Like this: http://s7.postimg.org/tvmmw91jf/theboxes.png
Fiddle: http://jsfiddle.net/NightSpark/1L5027qr/
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
Update: I put in a clearer illustration above than the one I had at first.
The easiest thing you could do to center the elements is using CSS Flexbox.
Here's the HTML :
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
</div>
Here's the CSS :
#footer {
display: flex;
flex-direction: row;
justify-content: space-between;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
Here's a Fiddle : http://jsfiddle.net/1L5027qr/1/
You can create a 25% width around each div.
<div id="footer">
<div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox1">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox2">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox3">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox4">
</div>
</div>
</div>
If you are able to modify the mark-up a little:
<div id="footer">
<div id="fbox1" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox2" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox3" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox4" class="outer">
<div class="inner">...</div>
</div>
<div>
CSS:
#footer {
width: 100%;
clear:both;
}
#footer .outer {
width: calc(100% / 4 - 4px);
text-align: center;
display: inline-block;
margin: 0px;
border: 0px;
}
#footer .inner {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
display: inline-block;
}
Fiddle: http://jsfiddle.net/simbunch/wcvb88yg/