I am in a bit of a pickle trying to vertically align a div. What I aim to achieve is to have 3 divs with height: 100% and width:33% to have a centered content div. Can anyone help? Here is the code:
.wrapper {
height: 100%;
width: 100%;
}
.window {
width: 33%;
float: left;
background-color: #666;
}
.windowContent {
background-color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="window">
<div class="windowContent">
</div>
</div>
<div class="window">
<div class="windowContent">
</div>
</div>
<div class="window">
<div class="windowContent">
</div>
</div>
</div>
</body>
</html>
Try this example
<div class="wrapper">
<div class="window">
<div class="windowContent">
1
</div>
</div>
<div class="window">
<div class="windowContent">
2
</div>
</div>
<div class="window">
<div class="windowContent">
3
</div>
</div>
</div>
CSS
.wrapper
{
height: 100%;
width: 100%;
display: flex;
}
.window
{
width: 100%;
min-height: 200px;
background-color: #666;
display: flex;
align-items: center;
justify-content: center;
}
.windowContent
{
background-color: #000;
color: #fff;
}
Demo - https://jsfiddle.net/xa3v1c3o/
Related
I'm trying to build a regular calculator but the layout doesn't behave. The "div.row div" css selector is being overlapped by its containing content to the right side. I tried checking chrome dev tools, but margin, padding and border are set to 0, so it doesn't give me a reason why it's happening.
Any help will be greatly appreciated!
body {
font-family: sans-serif;
width: 40%;
height: 1000px;
max-width: 1000px;
min-width: 250px;
margin: 0 auto;
}
main {
padding: 3%;
background-color: #753471;
}
div.row div {
display: inline-block;
width: 16.25%;
height: 30px;
padding: 2%;
background-color: #f2d8f0;
text-align: center;
margin: 0.3%;
font-size: 85%;
}
div.row {
display: inline-block;
width: 100%;
margin: 0%;
padding: 0;
}
div#output {
display: block;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Calculator</title>
</head>
<body>
<header></header>
<main>
<!-- output -->
<div id="output"></div>
<div class="row">
<div id="clear">C</div>
<div id="mudulu">%</div>
<div id="division">รท</div>
<div id="times">x</div>
</div>
<div class="row">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="minus">-</div>
</div>
<div class="row">
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="plus">+</div>
</div>
<div class="row">
<div id="seven">7</div>
<div id="eight">8</div>
<div id="nine">9</div>
<div id="equals">=</div>
</div>
<div class="row">
<div id="decimal">.</div>
<div id="zero">0</div>
<div id="delete">backspace</div>
</div>
</main>
</body>
</html>
I made a box containing some information. In this box I used flexbox to position the text and items. The thing is, on the right side I have a up and downside arrow. When making the browser smaller I want that the up and downside arrows will be place below "software engineer" only this does not happen.
I tried using:
.profile-box-header{
display:flex;
flex-wrap:wrap;
}
and flex-grow for this. Please check jsfiddle:
*{
font-family: verdana;
margin: 0;
}
body{
background: #eee;
}
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.profile-box-wrapper{
width:500px;
height:150px;
background:rgb(253, 253, 253);
border-radius:4px;
margin: 10px 10px;
display:flex;
flex-direction: column;
}
.profile-box-header img{
width:70px;
height:70px;
margin:5px 0 0 10px;
}
.profile-box-header{
display:flex;
flex-wrap:wrap;
}
.profile-name{
margin-left:10px;
flex-grow:1;
}
.profile-name h3{
}
.profile-right {
margin:0;
text-align:right;
margin-right:5px;
flex-grow:2;
}
.profile-box-content{
margin:15px 0 0 10px;
}
.profile-right img{
width:25px;
height:25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Net Ninja - CSS Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="profile-box-wrapper">
<div class="profile-box-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div class="profile-name">
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>A cool dude</p>
</div>
<div class="profile-right">
<img src="http://www.iconarchive.com/download/i86026/graphicloads/100-flat-2/arrow-up.ico" /> +1
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBfqvaL0rrs6wxMD_mzGnLyC5eg_Hd6UmzbMtZ9bJY0C1dKRc9" />-1
</div>
</div>
<div class="profile-box-content">
<div class="content">
<p>This is a lorum ipsum text</p>
</div>
</div>
</div>
</div>
</body>
</html>
Can someone please explain me how to use flexbox to get items under each other when making a browser smaller. Thanks.
You need to change the Flex Direction and set it with the help of the Media Queries, i edited your code check this solution :
*{
font-family: verdana;
margin: 0;
}
body{
background: #eee;
padding: 10px;
}
.profile-box-wrapper{
width:500px;
background:rgb(253, 253, 253);
border-radius:4px;
padding: 10px;
}
.profile-box-header{
display:flex;
align-items: center
}
.profile-box-header img{
width:70px;
height:70px;
}
.profile-name{
margin-left:10px;
}
.profile-right {
height:70px;
margin-left:auto;
text-align:right;
}
.profile-right img{
width:25px;
height:25px;
}
.profile-box-content{
margin-top:15px;
}
#media(max-width: 520px){
.profile-box-wrapper{
width: calc(100% - 20px);
}
.profile-box-header{
flex-direction: column;
}
.profile-right {
height: inherit;
margin-left: inherit;
margin-top: 10px;
text-align: center;
}
.profile-box-content{
text-align:center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Net Ninja - CSS Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="profile-box-wrapper">
<div class="profile-box-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div class="profile-name">
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>Software-engineer</p>
</div>
<div class="profile-right">
<img src="http://www.iconarchive.com/download/i86026/graphicloads/100-flat-2/arrow-up.ico" /> +1
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBfqvaL0rrs6wxMD_mzGnLyC5eg_Hd6UmzbMtZ9bJY0C1dKRc9" />-1
</div>
</div>
<div class="profile-box-content">
<div class="content">
<p>This is a lorum ipsum text</p>
</div>
</div>
</div>
</div>
</body>
</html>
Answer of question 2 :
p{
font-size: 80%;
opacity: .4;
}
div {
border: 5px solid green;
margin: 5px;
padding: 5px;
}
.container {
display: flex;
border-color: blue;
}
.container > div {
border-color: red;
}
.line {
position: relative;
}
.line:before{
content: "";
position: absolute;
margin: auto;
width: 100%;
height: 2px;
top: 0;
bottom: 0;
left: 0;
background-color: grey;
}
<p>// In this state you can see that all children has the same height , no problem</p>
<div class="container">
<div>child 1</div>
<div>child 2</div>
<div>
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Now let's make the height of children diffrent, this will look messy because they aren't centred at the same line</p>
<div class="container line">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:60px;">
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Now let's centre the children at the same line this will be perfect add to our parent container <b>align-items: center;</b></p>
<div class="container line" style="align-items: center;">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:60px;">
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Put the last child to the right using <b>margin-left: auto;</b></p>
<div class="container line" style="align-items: center;">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:60px;margin-left: auto;">
<div>child of child 3</div>
</div>
</div>
<br>
<p>// Now our <b>child 3</b> should be at the top of his parent so , it should take the max height of his parent but our parent has default height so it will take the max height of his children , in this state <b>child 2</b> has the max height, so we will set the height of <b>child 3</b> at same height or heigher then <b>child 2</b> wich is in this state <b> child 2 height > 120px</b> </p>
<div class="container line" style="align-items: center;">
<div style="height:90px;">child 1</div>
<div style="height:120px;">child 2</div>
<div style="height:120px; margin-left: auto;">
<div>child of child 3</div>
</div>
</div>
If you want only to wrap the icons without media queries you can try this
*{
font-family: verdana;
margin: 0;
}
body{
background: #eee;
}
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.flex-wrapper{
display:flex;
flex-wrap:wrap;
flex-grow: 1 ;
}
.profile-box-wrapper{
max-width:500px;
height:150px;
background:rgb(253, 253, 253);
border-radius:4px;
margin: 10px 10px;
display:flex;
flex-direction: column;
}
.profile-box-header img{
width:70px;
height:70px;
margin:5px 0 0 10px;
}
.profile-box-header{
display:flex;
}
.profile-name{
margin-left:10px;
flex-grow:1;
}
.profile-name h3{
}
.profile-right {
margin:0;
text-align:right;
margin-right:5px;
}
.profile-box-content{
margin:15px 0 0 10px;
}
.profile-right img{
width:25px;
height:25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Net Ninja - CSS Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="profile-box-wrapper">
<div class="profile-box-header">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABSlBMVEUuWHH////7YCDxyaXktpKRXyzrwJwmWHOHXjWUXyglU23oupYeT2oLSGWYZzb7VQCMWSP2zqrh5ukERmQhUGv7UAD6z6j7WxSWXyaLWCHL09n7VwDCy9KKUg9EaH7n3dVogpOcrLd3jp319/hWa3k6YXiRo6+wvMWmtL6GmqfY3uJBZn1mW1IRV3RScYZPWmCre1D+49qjckVGWWXElW79y7x/XT3+2s/9q5KyhVvDo4tGWWSjmY6MhYD59fL87ulyXUj6ZShdW1f6vqz449H8lXTvcEHqx6x1aG3HalDZa0fyaTb8hmGob2Pu1MDhb0nBdWL9pYn9tqL4dET4h2GAXV7mo5CmYFL8f1P4ajL60MTXYju1YEtrZW78nH9wXWOSZ2PfvqDBrJhzeHuzmofUpX+VkImPlZhsXE3RqoujfFjXx7m0lnvIsqAn7OWlAAAQm0lEQVR4nNWd+1sTxxrHd5eEhc1u7nGTgBESkoCYiBistDWIWot4qVZ6Wuw5HqulrT31///1zOwte5nb7r4Lyffp00cxDPPhfed95z6SnLl61fb6cHOnuzHu7PYlServdsYb3Z3N4Xq72sv+x0tZFt5rD3fGfd0wdL2uaZo0E/pbXcf/0B/vDNuZcmZF2FsfjDFB3c9FEiJFHxsP1rPCzIKwN+z2BdjCnP3uMAtKaMJee9Cp6XHgfJh6rTMAd1lQwt56Vzdi2S5qS0PvwjosICHGS0PnUWJIuGpBEVYHGgieC6kNqkA1gyEcjo06GJ6tujEegtQNgLC3qScMLWxpur4J0CJTE1a7up4Bni1d76Z21pSE1Y1aFuabSattpGRMRVjdAIwuVEYjHWMKwszt5zGmsmNiwt7gEuznMRqDxDEnKeFQyy6+kKRrSXNHMsKbu8al8mEZuzcvj3DnEh10Js3YuSTCtnS5DjqTLrUvg7BbuyI+rFo3c8KbfegOaDzV+3FbY0zCzcuPMGEZmxkS9sZX1QL90sexcmMcwrZ2FSE0Kk2LE3BiEG5eZYgJqraZBeHG1TfBmYwNcMJe52pjaFj1jmhjFCSszkkTnEnTBMcbYoTtefJQV4ZYvBEiHM5PjPGrJjTcECHcnk9AhLgNQzgH/RiaDAFEPuEcAwp14biEc5TnSeLnfh7h9jxbEIvrqBzC4bwDIkRORGUTzmmaCIqTNJiE7UUARIjM1M8irM7DaFBEOqsDxyDsSfPWF6VJkxjdcAZhZ1EAEWInCeHGfA2X2KrTx4tUwrnuykRF79zQCBckjM5EDagUwt4iuaitOiXaUAjHixNlXGnjOISDRcmEfukDccKbi9YIbRnECX8i4VVXNbFECbuLF2Zs1UkrUwTC9cXKhH7VCPvhCISLF0Zn0kQIdxbVR7Hq0YXwCOHNxfVRrGg8jRDuLrKTIjfd5REOFzHX+6WH5zRChL3FtiCW1mMSwnbXVFFB/tBw5y1IWIULM6jat289vLfC172Ht25LgJRGj0HYhXJSVXq0stpcXV3N84U+1VxdeSRBMWpdOmEVqMetSg+F2IKcD6EYa1Uq4QaMCdVbsflsxlswiNoGjRCqFd5rJuDDat6DqYBRpRACmXAliQEdM66A1CBgRB8hTCtUUwBiRBBH9bdEHyFIIFVvJXVRW02QtugPpzPCHkyyT2NBy4ogtdB7BMJNCEIURtMSghhR3yQQgphQXUkJmM/DtEQ9SggzqOiHWmG5ld/f28+3yuUoCv63ffxvwS83IerhG2J4hCBzwOrtAGG5fLhcwVq+OMy3fChlRLw3uShgXRwGEZu3QWLNOEwIk+3VR/5m2NpbrizZqlSWli8me0WLs7h3aNHlbBVye37G1UcgbuplfZcQZnYmEGhaE5fPpcRasgzn0jmMfjMC9d28GRuXEKxHOvPEwyCgo+UcQX5EsN5pkBBojjRgQyIgmTBXALehZKwHCIEGhj7C1kUswkkZ3IbdACHQ5IXfhkQ+GqHPiFCEbkqUIJ3UF0vLE7IJqYReSwSKpZ6bSpBO6iNs5eLZMHcBTui4qQTppH4bUkxIJSyAEzpuahGCbeOe9Wn2YhPuO98J06fBsjeCW4QDsMUYl5DaDOmEbkNs3oaqTH3gEXagypS+abq5ggJIJ3TzRfMbsNp0XEKoSUSkuy4hLdBQCb1Q07wLVptazyEEXI1xCcvLsQlz8ITWEEoCzBVYbiylATII3VgKVxkrX2DCPlyZLmGRFmjohIUiOKHUtwl7gKu+qkO4n4IQcCUKL9IgwnXAFTU1n5zQTYiAhPq6RQiXDWczUdSEzyDcs78VZibKFs6IEuwuPfWe5aaU0a8I4eo9QEI8W4MIITdfqA9TEz6EXBE2MCHgui8i/Cs14V+ghFVE2IZcuncGF2kIwYYWWHobEW6DEtpd7xSEcEMLLH0bEUL2aLyud/JYCtjxlqxejQS74VnTrpeTElr5sHwd9Ew1CqYS6HZZfevj8sV+K3HGLxcnuc8PNEg/lSWgZUMsVft4DU9tX+Rbifql5fwET4YXPm/BmVHvSYDJov+bzVWpHFKnaRiE+T13sr8Ah2hUJbhkof3mYVQmNEDG6OnQt5gBNuugtyWw4a/+7bUZB9WEDEIfYOEzWK3WJbB02LlGpRIjDNB+AvJTfVuCGlno39LtFp8wB2XE+kDaAfplaUJ8woSFLaBq7UhQq05bYk4qTPgApl5aVwLa6qU9ACb8Hab1aBvSGKQgqS7YDEUJc18DNcSxBJR56t/C2hAs1HSkXZiCwG0IRbgrAU2WQhMWoLy0D0UIH2mAshjcdPecZgsJjrEuBihMCNX3BvNSSf8dsl8KFmgQH1AsFXZTwZ43mJPuQuVDZMSPQtFU0IZgKw0dqD4NUh+OEGzwhPs0QP1SpLpQwhAhLPwON/GwATW2wDJEem4ChGDZXrLGFlDjQyxdAJFPCDWssITGh5Crh5L+aYnHyCMsFB5ALjOgMf426NFtTfv0WyrCzw8k0Arp23BzbW6RnwopCC8+QVdnCDhfakvdom744hMWDoGmZzzpbcg5b1u79DULvg2LkDtfsIwq5LqFLTVP3fHFIyxMILcpWNJ7sGtPWOoKfXmUR7gPuU3BFvT6oWRtx0jspS1oQmv9EHYNGBPStunzCAuTMuhGDMlZAwZdx5esDSfUWINPQOVCB2Z8hMAbMSRnHR88Xfy12iKlxEplKTfZb+XL+4dkysJFGewkgitrLwZ0ulBvrUa3YmDj7VkH8YrWsby9SS58+Akvc8NuNZGc/TSge6Ike0tNK7iBtpKbFN2zec4OxHK5eHhRCJqwlQEh+L42ySYMGrFycd09atC63rzecv5cbgUQ8U4F2M003r420NGFs2koYMRlj6/45caNG1+KLmM+2AqhN9N4exMh95diYUK/ESvuxtHr/zgH5v5xEfdnRrQ20ALu8bbk7C+FDjXWbvZWzjs+OnF4yn97p4//dqzamngHSa3DCE3gbqmzRxh0n7fknXZ2TVhwDdb63w1XX7y26PdRqFPOvqpksFcfy96856T9StFtdCjMIDXx/7yGmC9aRiw4G/WbwIGmC3/eAku1bVjes07+hk5q54vBv5YPrfPc7ldhCb3zFoBnZrDc/frlfBEpfBA/RJi3PuT8cRWY0LoABPjck6W7YQgmoV/AodQ79wSeEe/m6bdj0AlX82BXRdnynV2DfkZGZdzCQyUEun3HJ9/5Q7AzpDNREWmEoKcQbPnOkILnCzwOptzEQyFsQo99Q+eAM7iUVX1IRiQTNqGHvlLoLDf4hJuER8JERCJhE3rUhBU4j5+Bm+JhFAmRRAg9aLIUulMhk7uDQ7fVUAlXv8kAMHwvRjaXB6uE3E8gvJsFYPhuk4xuDybk/jAheJ53FLmfBnz5wlY094cI4fO8o8gdQ9m9FbDSXC23yq5a+bJPq034PG8rek9UdhcIq8Htw/4578IW7PWzPhHu+sqg5+aISZjVDyXc1wZz5x5RDMKsfiTxzr0s+jW2roKQdG9iJv0aS5dPSL77EnoyY6bLJ6TcXwp1B21YeodOqGfTnaHcQZtF1q/r9a0/vixRCHOf/9hS9Tr4L5Z6jzCwETXd6Pz5celacJdUcA24UMh9/eeWocP+YOpd0JAtsW7UN4ZT+clSWNFV7ifydL2rGXAdY8Z93mAXeo/6O/YTWkcChEfWJ28O+iPYy/aIhBAtUR11PpyeOwVOBQinzmfPTz90ICCNKoMw9dsI6kj6cHpsmsdugZE9CxHCZfejCvq20w+pLcl+GyHl+xaj0ckzhKcguQVGGmKE8JVHiIQgn52MRmkqwXnfIsUQAzW+l89tPFRTt7xp+EqsCKHrpFP3W83nL1MYMvK0LNQ7M+poC5lPcWW69ZZfcQi/dz94tDb77uNnWwkZ+e/MJHsrSB2d/GDO+BSldEQzYpjQ+1UclXzfb5o/nCRiFHgrKMGMDeL7NcCnKA2PMNwSQ4ReK5TvNAIlJGMUee8p/rtyo63TIB624Z1ZeRUG4fLsY1+VwoWYp1uxYw4BJ/qleHOnav+1EgFUSl/NypsyCKezjx1ECFG5r/uxzGiIvbsW6+280cl5lA8RHvjKm1IJfYDy4yghYnx+EsOMom/nxfHT0WsSn6KsPfaXN60QCZcDP/THNWJJ5usYiEQY0hdF37BU+z+QAZW1H4MlPlmOEr4KfuQNpSjzVNRTY7xhKdh5U/tvKbVSzPehEqffhwi/n4Y+8R21rKdiiHHeIRWcH1af0iqlmN9Fipw+WVr2CF+F+WT5Bb2wpyKOGu8tWaH3gEfRJDGr1C+kUqdHT568evXqKIqHdE4tTDGfCSCG+6McQoE3ndUTOqCiHFPKpYscaBzEE66fxn3TWeBd7tEzFmEpNmGDUZp5yjNi/He5+W+rj54zqqQ0iJ7I0BGLUFE4uwuTvK0uyx1mtFG3WCZUGnfoBRMV7bQFjPiS6aZah14wg5A9GlZfMgn93TYhETptfrHDKS3KcAjZszasSIoJHzMKJonSpfGMyFoKD83MiBMyA6p6zKxRuFPDFa1L4xL+TDciNYzyCeUhFVH9D6dG4U4NT2fs8hhuWgvPW8QhlIc0Rx39zCEkpnyGqB1At0DazszIxEw8Qnmbgshphopyzik4LHZp9GhqbHMK5hHSMv+I3Qz9c1FCOmKHUqRfiW5a2+SVzCWUN0ltkd1lw/LN1IjoDpdQSQYoQChvExB5zTB2QuSkQyTzv1E3rfFcVIyQFFG5zTA4j8EXJx1iwn9H3JQTRcUJ5fUIYp/XDBXzfizC97zfmKI8DxPWCPNOCQkjpzB52VAhjoFZ+oVPaIYAdWaij0koV4P3F3M6pZbipQuukyLCn/wNUdNYXbX4hHKv4x9M8ZshCqZxAKfssZNN6G+I9Q6js52IEI0XfYlxxJhy8AjjpAuBZBFoiAZ9PJic0JcYOWNDW7HSBT9ZYM1izKZ40TEI5ba7L0T9IEC4Fmf8dF+gHXoZUauLxZj4hKgx2jGVPUXj1udNjJJ5Iwu7xJ8tQl24CcYnlOWB5amjpyL1iTO6YM75eLLmowzyxC9VMQnlm/gKIH6+xzoWL3Uq4qSoxBH66cSpe4biEspyt8bvdluKEUzvCCQLBY8Ra6TVJbbiE8ptfrfbUoxgKhZKlbWf4oQYRwkIZflfDRHEGMGUM0ljy2zEnRmxlIhQvnMu8EuPMVVDX5WZqXQedwrWVjJCWX5s8oc7b4VLE+h2m3GnJ10lJZSnb0rcIaJoWdwpDLP0Ju4qgafEhKheZ5zmWBINpuwZfdQAz+JNiQSUghA1xxdMRuFhPnOAbzZeJGuAjlIRchiFh/nUBW7M90sqvtSEiPGM2h7NF4JlUMdiZuksJR8AIWqP90s0SLECKMNfs1S6n6L9uQIgRHr8luisgv02YqAxG2+T5oegYAiRs75ZixpSMNREA41ZWnuf2j0dQREiHZyFvVUw1IQCDfLOs3iTrUwBEqIGdXAWsKTgEPE4gLd2dpA4u5MESog0fff+vLHmUpr8b/D1aMy1xvn7d6B4Mjwh1tHj746Rw5rBbaZUvSvhbmepdHz2GCB0RpQFIdbRwZu3a42GSDi832isvX1zkAUdVlaElo7eHfAnjaYH77KCs5QpoaWe3Jva/yFZX8F/6KH/W/9l/vP/D/FK8XoQWqtiAAAAAElFTkSuQmCC"
alt="profile pic Nuri" />
<div class="flex-wrapper">
<div class="profile-name">
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>Software-engineer</p>
</div>
<div class="profile-right">
<img src="http://www.iconarchive.com/download/i86026/graphicloads/100-flat-2/arrow-up.ico" /> +1
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBfqvaL0rrs6wxMD_mzGnLyC5eg_Hd6UmzbMtZ9bJY0C1dKRc9" />-1
</div>
</div>
</div>
<div class="profile-box-content">
<div class="content">
<p>This is a lorum ipsum text</p>
</div>
</div>
</div>
</div>
</body>
</html>
changed width to max-width in .profile-box-wrapper so the profile-box-wrapper can become smaller than 500px.
added .flex-wrapper around profile-name and profile-right so the icons will be under profile-name when they wrap.
.flex-wrapper is a flexbox, added flex-wrap:wrap; so the icons can wrap.
flex-grow: 1; is used so .flex-wrapper takes the remaining width.
check out this guide for css flex A Complete Guide to Flexbox
Here's a version that scales.
body {
margin: 0;
background: #eee;
font-family: verdana;
}
img {
max-width: 100%;
display: inline-block;
}
.users {
position: relative;
box-sizing: border-box;
min-height: 1px;
vertical-align: top;
width: 100%;
max-width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
}
.users-list-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
position: relative;
float: none;
}
.users-list-card {
background: #fff;
width: calc(33.3% - 60px);
text-align: left;
position: relative;
padding: 10px;
margin: 20px;
}
#media (min-width: 768px) and (max-width: 960px) {
.users-list-card {
width: calc(50% - 60px);
}
}
#media (max-width: 767px) {
.users-list-card {
width: 100%;
display: block;
}
}
.users-list-card-header {
display: flex;
}
.users-list-card-header h2 {
margin: 0;
}
.users-list-card-header img {
width: 50px;
height: 50px;
margin-right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Net Ninja - CSS Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="referrer" content="origin" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="user-list">
<div class="users-list-wrapper">
<div class="users-list-card">
<div class="users-list-card-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div>
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>Software-engineer</p>
</div>
</div>
</div>
<div class="users-list-card">
<div class="users-list-card-header">
<img src="data:image/png;base64,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"
alt="profile pic Nuri" />
<div>
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>Software-engineer</p>
</div>
</div>
</div>
<div class="users-list-card">
<div class="users-list-card-header">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABSlBMVEUuWHH////7YCDxyaXktpKRXyzrwJwmWHOHXjWUXyglU23oupYeT2oLSGWYZzb7VQCMWSP2zqrh5ukERmQhUGv7UAD6z6j7WxSWXyaLWCHL09n7VwDCy9KKUg9EaH7n3dVogpOcrLd3jp319/hWa3k6YXiRo6+wvMWmtL6GmqfY3uJBZn1mW1IRV3RScYZPWmCre1D+49qjckVGWWXElW79y7x/XT3+2s/9q5KyhVvDo4tGWWSjmY6MhYD59fL87ulyXUj6ZShdW1f6vqz449H8lXTvcEHqx6x1aG3HalDZa0fyaTb8hmGob2Pu1MDhb0nBdWL9pYn9tqL4dET4h2GAXV7mo5CmYFL8f1P4ajL60MTXYju1YEtrZW78nH9wXWOSZ2PfvqDBrJhzeHuzmofUpX+VkImPlZhsXE3RqoujfFjXx7m0lnvIsqAn7OWlAAAQm0lEQVR4nNWd+1sTxxrHd5eEhc1u7nGTgBESkoCYiBistDWIWot4qVZ6Wuw5HqulrT31///1zOwte5nb7r4Lyffp00cxDPPhfed95z6SnLl61fb6cHOnuzHu7PYlServdsYb3Z3N4Xq72sv+x0tZFt5rD3fGfd0wdL2uaZo0E/pbXcf/0B/vDNuZcmZF2FsfjDFB3c9FEiJFHxsP1rPCzIKwN+z2BdjCnP3uMAtKaMJee9Cp6XHgfJh6rTMAd1lQwt56Vzdi2S5qS0PvwjosICHGS0PnUWJIuGpBEVYHGgieC6kNqkA1gyEcjo06GJ6tujEegtQNgLC3qScMLWxpur4J0CJTE1a7up4Bni1d76Z21pSE1Y1aFuabSattpGRMRVjdAIwuVEYjHWMKwszt5zGmsmNiwt7gEuznMRqDxDEnKeFQyy6+kKRrSXNHMsKbu8al8mEZuzcvj3DnEh10Js3YuSTCtnS5DjqTLrUvg7BbuyI+rFo3c8KbfegOaDzV+3FbY0zCzcuPMGEZmxkS9sZX1QL90sexcmMcwrZ2FSE0Kk2LE3BiEG5eZYgJqraZBeHG1TfBmYwNcMJe52pjaFj1jmhjFCSszkkTnEnTBMcbYoTtefJQV4ZYvBEiHM5PjPGrJjTcECHcnk9AhLgNQzgH/RiaDAFEPuEcAwp14biEc5TnSeLnfh7h9jxbEIvrqBzC4bwDIkRORGUTzmmaCIqTNJiE7UUARIjM1M8irM7DaFBEOqsDxyDsSfPWF6VJkxjdcAZhZ1EAEWInCeHGfA2X2KrTx4tUwrnuykRF79zQCBckjM5EDagUwt4iuaitOiXaUAjHixNlXGnjOISDRcmEfukDccKbi9YIbRnECX8i4VVXNbFECbuLF2Zs1UkrUwTC9cXKhH7VCPvhCISLF0Zn0kQIdxbVR7Hq0YXwCOHNxfVRrGg8jRDuLrKTIjfd5REOFzHX+6WH5zRChL3FtiCW1mMSwnbXVFFB/tBw5y1IWIULM6jat289vLfC172Ht25LgJRGj0HYhXJSVXq0stpcXV3N84U+1VxdeSRBMWpdOmEVqMetSg+F2IKcD6EYa1Uq4QaMCdVbsflsxlswiNoGjRCqFd5rJuDDat6DqYBRpRACmXAliQEdM66A1CBgRB8hTCtUUwBiRBBH9bdEHyFIIFVvJXVRW02QtugPpzPCHkyyT2NBy4ogtdB7BMJNCEIURtMSghhR3yQQgphQXUkJmM/DtEQ9SggzqOiHWmG5ld/f28+3yuUoCv63ffxvwS83IerhG2J4hCBzwOrtAGG5fLhcwVq+OMy3fChlRLw3uShgXRwGEZu3QWLNOEwIk+3VR/5m2NpbrizZqlSWli8me0WLs7h3aNHlbBVye37G1UcgbuplfZcQZnYmEGhaE5fPpcRasgzn0jmMfjMC9d28GRuXEKxHOvPEwyCgo+UcQX5EsN5pkBBojjRgQyIgmTBXALehZKwHCIEGhj7C1kUswkkZ3IbdACHQ5IXfhkQ+GqHPiFCEbkqUIJ3UF0vLE7IJqYReSwSKpZ6bSpBO6iNs5eLZMHcBTui4qQTppH4bUkxIJSyAEzpuahGCbeOe9Wn2YhPuO98J06fBsjeCW4QDsMUYl5DaDOmEbkNs3oaqTH3gEXagypS+abq5ggJIJ3TzRfMbsNp0XEKoSUSkuy4hLdBQCb1Q07wLVptazyEEXI1xCcvLsQlz8ITWEEoCzBVYbiylATII3VgKVxkrX2DCPlyZLmGRFmjohIUiOKHUtwl7gKu+qkO4n4IQcCUKL9IgwnXAFTU1n5zQTYiAhPq6RQiXDWczUdSEzyDcs78VZibKFs6IEuwuPfWe5aaU0a8I4eo9QEI8W4MIITdfqA9TEz6EXBE2MCHgui8i/Cs14V+ghFVE2IZcuncGF2kIwYYWWHobEW6DEtpd7xSEcEMLLH0bEUL2aLyud/JYCtjxlqxejQS74VnTrpeTElr5sHwd9Ew1CqYS6HZZfevj8sV+K3HGLxcnuc8PNEg/lSWgZUMsVft4DU9tX+Rbifql5fwET4YXPm/BmVHvSYDJov+bzVWpHFKnaRiE+T13sr8Ah2hUJbhkof3mYVQmNEDG6OnQt5gBNuugtyWw4a/+7bUZB9WEDEIfYOEzWK3WJbB02LlGpRIjDNB+AvJTfVuCGlno39LtFp8wB2XE+kDaAfplaUJ8woSFLaBq7UhQq05bYk4qTPgApl5aVwLa6qU9ACb8Hab1aBvSGKQgqS7YDEUJc18DNcSxBJR56t/C2hAs1HSkXZiCwG0IRbgrAU2WQhMWoLy0D0UIH2mAshjcdPecZgsJjrEuBihMCNX3BvNSSf8dsl8KFmgQH1AsFXZTwZ43mJPuQuVDZMSPQtFU0IZgKw0dqD4NUh+OEGzwhPs0QP1SpLpQwhAhLPwON/GwATW2wDJEem4ChGDZXrLGFlDjQyxdAJFPCDWssITGh5Crh5L+aYnHyCMsFB5ALjOgMf426NFtTfv0WyrCzw8k0Arp23BzbW6RnwopCC8+QVdnCDhfakvdom744hMWDoGmZzzpbcg5b1u79DULvg2LkDtfsIwq5LqFLTVP3fHFIyxMILcpWNJ7sGtPWOoKfXmUR7gPuU3BFvT6oWRtx0jspS1oQmv9EHYNGBPStunzCAuTMuhGDMlZAwZdx5esDSfUWINPQOVCB2Z8hMAbMSRnHR88Xfy12iKlxEplKTfZb+XL+4dkysJFGewkgitrLwZ0ulBvrUa3YmDj7VkH8YrWsby9SS58+Akvc8NuNZGc/TSge6Ike0tNK7iBtpKbFN2zec4OxHK5eHhRCJqwlQEh+L42ySYMGrFycd09atC63rzecv5cbgUQ8U4F2M003r420NGFs2koYMRlj6/45caNG1+KLmM+2AqhN9N4exMh95diYUK/ESvuxtHr/zgH5v5xEfdnRrQ20ALu8bbk7C+FDjXWbvZWzjs+OnF4yn97p4//dqzamngHSa3DCE3gbqmzRxh0n7fknXZ2TVhwDdb63w1XX7y26PdRqFPOvqpksFcfy96856T9StFtdCjMIDXx/7yGmC9aRiw4G/WbwIGmC3/eAku1bVjes07+hk5q54vBv5YPrfPc7ldhCb3zFoBnZrDc/frlfBEpfBA/RJi3PuT8cRWY0LoABPjck6W7YQgmoV/AodQ79wSeEe/m6bdj0AlX82BXRdnynV2DfkZGZdzCQyUEun3HJ9/5Q7AzpDNREWmEoKcQbPnOkILnCzwOptzEQyFsQo99Q+eAM7iUVX1IRiQTNqGHvlLoLDf4hJuER8JERCJhE3rUhBU4j5+Bm+JhFAmRRAg9aLIUulMhk7uDQ7fVUAlXv8kAMHwvRjaXB6uE3E8gvJsFYPhuk4xuDybk/jAheJ53FLmfBnz5wlY094cI4fO8o8gdQ9m9FbDSXC23yq5a+bJPq034PG8rek9UdhcIq8Htw/4578IW7PWzPhHu+sqg5+aISZjVDyXc1wZz5x5RDMKsfiTxzr0s+jW2roKQdG9iJv0aS5dPSL77EnoyY6bLJ6TcXwp1B21YeodOqGfTnaHcQZtF1q/r9a0/vixRCHOf/9hS9Tr4L5Z6jzCwETXd6Pz5celacJdUcA24UMh9/eeWocP+YOpd0JAtsW7UN4ZT+clSWNFV7ifydL2rGXAdY8Z93mAXeo/6O/YTWkcChEfWJ28O+iPYy/aIhBAtUR11PpyeOwVOBQinzmfPTz90ICCNKoMw9dsI6kj6cHpsmsdugZE9CxHCZfejCvq20w+pLcl+GyHl+xaj0ckzhKcguQVGGmKE8JVHiIQgn52MRmkqwXnfIsUQAzW+l89tPFRTt7xp+EqsCKHrpFP3W83nL1MYMvK0LNQ7M+poC5lPcWW69ZZfcQi/dz94tDb77uNnWwkZ+e/MJHsrSB2d/GDO+BSldEQzYpjQ+1UclXzfb5o/nCRiFHgrKMGMDeL7NcCnKA2PMNwSQ4ReK5TvNAIlJGMUee8p/rtyo63TIB624Z1ZeRUG4fLsY1+VwoWYp1uxYw4BJ/qleHOnav+1EgFUSl/NypsyCKezjx1ECFG5r/uxzGiIvbsW6+280cl5lA8RHvjKm1IJfYDy4yghYnx+EsOMom/nxfHT0WsSn6KsPfaXN60QCZcDP/THNWJJ5usYiEQY0hdF37BU+z+QAZW1H4MlPlmOEr4KfuQNpSjzVNRTY7xhKdh5U/tvKbVSzPehEqffhwi/n4Y+8R21rKdiiHHeIRWcH1af0iqlmN9Fipw+WVr2CF+F+WT5Bb2wpyKOGu8tWaH3gEfRJDGr1C+kUqdHT568evXqKIqHdE4tTDGfCSCG+6McQoE3ndUTOqCiHFPKpYscaBzEE66fxn3TWeBd7tEzFmEpNmGDUZp5yjNi/He5+W+rj54zqqQ0iJ7I0BGLUFE4uwuTvK0uyx1mtFG3WCZUGnfoBRMV7bQFjPiS6aZah14wg5A9GlZfMgn93TYhETptfrHDKS3KcAjZszasSIoJHzMKJonSpfGMyFoKD83MiBMyA6p6zKxRuFPDFa1L4xL+TDciNYzyCeUhFVH9D6dG4U4NT2fs8hhuWgvPW8QhlIc0Rx39zCEkpnyGqB1At0DazszIxEw8Qnmbgshphopyzik4LHZp9GhqbHMK5hHSMv+I3Qz9c1FCOmKHUqRfiW5a2+SVzCWUN0ltkd1lw/LN1IjoDpdQSQYoQChvExB5zTB2QuSkQyTzv1E3rfFcVIyQFFG5zTA4j8EXJx1iwn9H3JQTRcUJ5fUIYp/XDBXzfizC97zfmKI8DxPWCPNOCQkjpzB52VAhjoFZ+oVPaIYAdWaij0koV4P3F3M6pZbipQuukyLCn/wNUdNYXbX4hHKv4x9M8ZshCqZxAKfssZNN6G+I9Q6js52IEI0XfYlxxJhy8AjjpAuBZBFoiAZ9PJic0JcYOWNDW7HSBT9ZYM1izKZ40TEI5ba7L0T9IEC4Fmf8dF+gHXoZUauLxZj4hKgx2jGVPUXj1udNjJJ5Iwu7xJ8tQl24CcYnlOWB5amjpyL1iTO6YM75eLLmowzyxC9VMQnlm/gKIH6+xzoWL3Uq4qSoxBH66cSpe4biEspyt8bvdluKEUzvCCQLBY8Ra6TVJbbiE8ptfrfbUoxgKhZKlbWf4oQYRwkIZflfDRHEGMGUM0ljy2zEnRmxlIhQvnMu8EuPMVVDX5WZqXQedwrWVjJCWX5s8oc7b4VLE+h2m3GnJ10lJZSnb0rcIaJoWdwpDLP0Ju4qgafEhKheZ5zmWBINpuwZfdQAz+JNiQSUghA1xxdMRuFhPnOAbzZeJGuAjlIRchiFh/nUBW7M90sqvtSEiPGM2h7NF4JlUMdiZuksJR8AIWqP90s0SLECKMNfs1S6n6L9uQIgRHr8luisgv02YqAxG2+T5oegYAiRs75ZixpSMNREA41ZWnuf2j0dQREiHZyFvVUw1IQCDfLOs3iTrUwBEqIGdXAWsKTgEPE4gLd2dpA4u5MESog0fff+vLHmUpr8b/D1aMy1xvn7d6B4Mjwh1tHj746Rw5rBbaZUvSvhbmepdHz2GCB0RpQFIdbRwZu3a42GSDi832isvX1zkAUdVlaElo7eHfAnjaYH77KCs5QpoaWe3Jva/yFZX8F/6KH/W/9l/vP/D/FK8XoQWqtiAAAAAElFTkSuQmCC"
alt="profile pic Nuri" />
<div>
<h2>John Doe</h2>
<h3>j.doe#test.nl</h3>
<p>Software-engineer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
the layout I'm trying to make
Can anyone help me how to put the div below the carousel? I'm kinda new to this
Give the carrousel a z-index: 5; and position: relative; and give the div you want under it a position: relative; and top: -value where value is the pixels you want it to go up.
Instead of the <div class="carousel"> use your own carrousel div. and same with the header.
For more info on how z-index works visit https://www.w3schools.com/cssref/pr_pos_z-index.asp
header {
height: 80px;
width: 100vw;
background-color: yellow;
position: relative;
}
nav {
height: 40px;
width: 100vw;
background-color: pink;
position: absolute;
bottom: 0;
}
.carousel {
width: 100vw;
height: 100px;
background-color: RGBA(0,255,0,0.4);
z-index: 5;
position: relative;
}
.classname {
width: 80vw;
height: 200px;
background-color: lightblue;
display: block;
margin: 0 auto;
position: relative;
top: -40px;
}
header,
nav{
text-align: center;
line-height: 40px;
}
.carousel{
text-align: center;
line-height: 100px;
}
.classname{
text-align: center;
line-height: 200px;
}
<header>
Header
<nav>
Nav
</nav>
</header>
<div class="carousel">
Carousel
</div>
<div class="classname"> DIV below carousel</div>
You can try this solution. Using margin top.
JSFiddel Link: https://jsfiddle.net/VrtuosArs/9h8djmy2/1/
body {
color: #000;
}
header {
background: yellow;
padding: 0.1rem;
}
.headertext {
text-align: center;
color: #000;
}
nav {
background: #FF9EC5;
padding: 0.1rem;
}
#carousel {
background: #9BFF00;
padding: 1rem;
}
#bcarousel {
background: #95D6ED;
}
.dac {
height: 240px;
margin-top: -2rem;
}
footer {
background: #C2C2C2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Div carousel</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.0.0/cerulean/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Header</h1>
</div>
</div>
</div>
</header>
<nav>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Navbar</h1>
</div>
</div>
</div>
</nav>
<div class="container-fluid" id="carousel">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Carousel</h1>
</div>
</div>
</div>
<div class="container" id="bcarousel">
<div class="row dac">
<div class="col-6 offset-md-3 mx-auto">
<h3 class="text-center headertext">Div below carousel</h3>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-12 mx-auto">
<h1 class="text-center headertext">Footer</h1>
</div>
</div>
</div>
</footer>
</body>
</html>
I've been working on this for days and feel like I've tried everything. Not sure if it's just something small that I'm missing or if I'm completely off track. I need to position my divs on the page like in this image the code I've got so far is this.
HTML:
body {
margin: 0px;
padding: 0px;
width: 1024px;
height: 768px;
float: left;
}
.pagebanner {
height: 200px;
width: 1024px;
}
.header {
background-color: aqua;
height: 50px;
margin-top: 0px;
padding-left: 200px
}
.navbar {
background-color: brown;
float: left;
height: 768px;
}
.subheading {
background-color: chartreuse;
padding-left: 420px;
margin-top: 0px
}
.content {
background-color: crimson;
height:
}
.footer {
background-color: darkgreen;
padding: 20px;
margin-bottom: 0px
}
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>The Club Site</title>
</head>
<body>
<div wrapper="mainwrapper">
<div class="pagebanner"><img src="HTML Pract A/images/banner.jpg" alt="PageBanner" width="1024px" height="200px">
<div class="navbar">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="header">
<h1 class="header">The Club Site</h1>
</div>
<div class="subheading">
<h2>Members Prices</h2>
</div>
<div class="content">
</div>
<div class="footer">
<p>blah blah blah</p>
</div>
</div>
</body>
</html>
Any help with this would be greatly appreciated. First time trying to use HTML and I'm not having much luck with it.
In this sample i try to introduction bootstrap framework to you, bootstrap can help you to make a lot of html templates with less time, try t read documentation of this framework and you will figure out how it's easy.
Good luck with it and always before you ask something search about it,
i'm sure you will get solved questions.
This sample based on bootstrap 4 framework
.nav {
background-color: #ccc;
min-height: 500px;
}
.header {
background-color: #eee;
}
.sub-header {
background-color: yellow;
margin-bottom: 15px;
}
.item {
border: solid 1px #ccc;
text-align: center;
height: 150px;
margin-bottom: 15px;
}
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>The Club Site</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<h1>header</h1>
</div>
</div>
<div class="row">
<div class="col-4 nav">
<h3>nav</h3>
</div>
<div class="col-8">
<div class="row">
<div class="col header">
<h3>The Club Site</h3>
</div>
</div>
<div class="row">
<div class="col sub-header">
<h6>sub header</h6>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="item">
<h4>item 1</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 2</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 3</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 4</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 5</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 6</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<header>Header</header>
<div id="main">
<article>
<div class="my-container">
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
</div>
</article>
<nav>Nav</nav>
</div>
<footer>Footer</footer>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
#main > article {
flex: 1;
order: 1;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
}
#main > nav {
background: #D7E8D4;
order: 3;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
.my-container {
display: flex;
flex-flow: row wrap;
align-content: flex-start; /* pack wrapping lines to the top */
width: 100%;
height: 300px;
}
.image {
flex: 0 0 30%;
margin: 5px;
}
img {enter code here
max-width: 100%;
}
</style>
Note: try to learn instead copy & paste it, to start try to write codes again.
I change and also add some css class in your codes, so pay-attention to different between old version and new css and html files.
Description: for start modeling your style you need to separate all partsyou need; for example here we need:
Header
Header > image
main > nav
main > content
main > content > header
main > content > subheading
main > content > area
main > content > area > items
main > content > area > items > item
etc...
and then start to html them, insert your div or what you want, and last step is manage them with css.
body {
margin: 0px;
padding: 0px;
}
.mainwrapper {
width: 1024px;
margin: 0 auto;
}
.pagebanner {
height: 250px;
margin: 0;
}
.pagebanner img {
width: 100%;
height: 100%;
}
.main {
margin: 0;
}
.navbar {
background-color: brown;
min-height: 500px;
width: 20%;
float: left;
}
.navbar li {
list-style: none;
margin-bottom: 15px;
}
.navbar a {
color: #fff;
font-size: 20px;
}
.content {
width: 80%;
float: left;
padding: 0;
min-height: 500px;
}
.header {
background-color: #000;
text-align: center;
}
.header h1 {
color: #fff;
margin: 0;
}
.subheading {
background-color: #f8d631;
text-align: center;
}
.subheading h2 {
background-color: #f8d631;
margin: 0;
}
.area h3 {
margin: 0;
text-align: center;
}
.item {
width: 33.33333333333333%;
float: left;
text-align: center;
}
.item div {
padding: 0 15px;
}
.item img {
height: 150px;
width: 100%;
}
.footer {
background-color: darkgreen;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="mainwrapper">
<div class="pagebanner">
<img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
</div>
<div class="main">
<div class="navbar">
<ul>
<li>
Information
</li>
<li>
Home
</li>
</ul>
</div>
<div class="content">
<div class="header">
<h1>The Club Site</h1>
</div>
<div class="subheading">
<h2>Members Prices</h2>
</div>
<div class="area">
<h3>discounted Items</h3>
<div class="items">
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The Code
.inner-image:nth-child(2) {
background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}
is not recognized and i do not know why. I took a look with Firebug and the second child is not even listed. I simply want to set the background to the image provided in the Link you see above.
Here is the complete sourcecode.
CSS
.inner {
background-color: #000;
height: 100%;
padding: 35px;
text-align: justify;
width: 100%;
color: #fff;
}
.inner-video,
.inner-image {
padding: 0px;
}
.inner-image {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.inner-image:nth-child(2) {
background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="inner">
This is a Test!
</div>
</div>
<div class="col-md-4">
<div class="inner inner-image">
</div>
</div>
<div class="col-md-4">
<div class="inner inner-image">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="inner inner-video">
<iframe src="https://www.youtube.com/embed/c80yIJQJO8s" frameborder="0" allowfullscreen style="width: 100%; height: 100%; min-height: 360px;"></iframe>
</div>
</div>
<div class="col-md-6">
<div class="inner">
This is a Test!
</div>
</div>
</div>
</div>
</body>
</html>
You're selecting the wrong class. :nth-child(2) will not be selected for .inner-image because it is always the only child. You should select the .image-container. :nth-child refers to itself and not its children.
.image-container:nth-child(2) .inner-image {
/* styles here */
}
The reason it is not working is because there are no siblings of .inner-image; it is contained in its own div. A solution could be:
<div class="image-container col-md-4">
<div class="inner inner-image">
</div>
</div>
<div class="image-container col-md-4">
<div class="inner inner-image">
</div>
</div>
CSS:
.image-container:nth-child(2) .inner-image{...}