I've created a basic HTML page layout with 3 divs. The third div (sidebar) meant float to top right but it floats on the right but under the 1st div.
Does anyone know where I am going wrong?
So the green div (sidebar) should float to top right when the window is maximised, and if the window is resized, it should float on the right under the div 1 and alongside div 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles1.css" type="text/css" />
<style type="text/css">
.page {
width:90%;
}
.div1 {
width: 750px;
background-color: gray;
float:left;
}
.div2 {
width: 60%;
background-color: blue;
float:left;
}
.sidebar {
width: 30%;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="page">
<div class="div1">
<p>div1</p>
</div>
<div class="div2">
<p>div2</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
</body>
</html>
consider this code snippet, I switched the '.div2 'and '.sidebar' positions
.page {
width:90%;
}
.div1 {
width: 750px;
background-color: gray;
float:left;
}
.div2 {
width: 60%;
background-color: blue;
float:left;
}
.sidebar {
width: 30%;
background-color: green;
float: right;
}
<div class="page">
<div class="div1">
<p>div1</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="div2">
<p>div2</p>
</div>
</div>
You can use CSS Grid Layout system. https://www.w3schools.com/css/css_grid.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles1.css" type="text/css" />
<style type="text/css">
.page {
width:90%;
float:left;
display: grid;
grid-template-areas:
'header header sidebar'
'main main sidebar';
}
.div1 {
grid-area: header;
width: 100%;
background-color: gray;
float:left;
padding:7px;
color:#fff;
}
.div2 {
grid-area: main;
width: 100%;
background-color: blue;
float:left;
padding:7px;
color:#fff;
}
.sidebar {
grid-area: sidebar;
width: 100%;
background-color: green;
float: left;
padding:7px;
color:#fff;
}
</style>
</head>
<body>
<div class="page">
<div class="div1">
<p>div1</p>
</div>
<div class="div2">
<p>div2</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
</body>
</html>
Related
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,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"
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,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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>
</div>
</div>
</body>
</html>
How can I accomplish the same look as in https://stackoverflow.com/a/1032952/288568 but with the right div being the first in the HTML (so it appears first later when the site is displayed on a mobile where I stack left and right just on top of each other) ?
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
</style>
</head>
<body>
<div>
<div id="right">
right
</div>
<div id="left">
left
</div>
</div>
</body>
</html>
If to use float, add this to your #right rule
float: right;
width: calc(100% - 180px);
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
float: right;
width: calc(100% - 180px);
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div id="right">
right
</div>
<div id="left">
left
</div>
</div>
</body>
</html>
flexbox would be another option, here using its order property
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
.wrapper {
display: flex;
}
#left {
width: 180px;
order: 1;
background-color: #ff0000;
}
#right {
flex: 1;
order: 2;
background-color: #00FF00;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="right">
right
</div>
<div id="left">
left
</div>
</div>
</body>
</html>
#left {
width: 20%;
background-color: #ff0000;
}
#right {
float: right;
width: 80%;
background-color: #00FF00;
}
<html>
<head>
<title>This is My Page's Title</title>
</head>
<body>
<div>
<div id="right">
right
</div>
<div id="left">
left
</div>
</div>
</body>
</html>
I built a menu but for some reason the left side of the menu drops when the browser is re-sized and when this happens the bottom border disappears. Is there any way to stop this from happening and just have the whole menu scale until it reaches a certain size?
heres my CSS:
#charset "utf-8";
/* Main CSS Document */
#parent{
padding: 0px, auto;
width: 50%;
min-width:50%;
height: 50px;
margin-top:3%;
margin-left: 25%;
margin-right: 15%;
background: #FFF;
border-bottom:thin groove #000;
}
#child-left{
float: left;
padding-left:25px;
width: 35%;
min-width:35%;
height: 50px;
background: #FFF;
}
#child-right{
padding-top: 15px;
padding-right:20px;
float: right;
width: 60%;
min-width:60%;
height: 35px;
background: #FFF;
}
#logoparent{
padding: 0px, auto;
width: 100%;
height: 50px;
margin-left: 15%;
margin-right: 15%;
background: #FFF;
}
#menu{
float:right;
padding-right:7%;
font-family:"Courier New", Courier, monospace;
font-size:18px;
font-weight:600;
color:#666666;
}
#menuend {
padding-right:10px;
float:right;
font-family:"Courier New", Courier, monospace;
font-size:18px;
font-weight:600;
color:#666666;
}
#menu:hover{
color:#C30;
}
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mainstylesheet.css" />
<title>Home</title>
</head>
<body>
<div id="parent">
<div id="child-left"><img name="Logo" src="" width="100%" height="100%" alt="" /></div>
<div id="child-right">
<div id="menupad">
<div id="menuend"> Contact </div>
<div id="menu"> Gallery </div>
<div id="menu"> About </div>
<div id="menu"> Home </div>
</div>
</div>
</div>
</body>
</html>
Any help is greatly appreciated!
Ok so I saw your design and couldn't decipher all the % you are using in your css (my bad) so i started from scratch and tried to match your design. I hope you can adjust it to your linking. Here it is:
See jsFiddle
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mainstylesheet.css" />
<title>Home</title>
</head>
<body>
<div id="parent">
<div id="child-left">
<img name="Logo" src="" width="200px" height="50px" alt="" />
</div>
<div id="child-right">
<div id="menupad">
<div id="menuend"> Contact </div>
<div id="menu"> Gallery </div>
<div id="menu"> About </div>
<div id="menu"> Home </div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* Main CSS Document */
#parent{
max-width: 900px;
margin: 0 auto;
border-bottom:thin groove #000;
}
#child-left{
float: left;
height: 50px;
}
#child-right{
float: right;
height: 50px;
line-height: 80px;
vertical-align: bottom;
}
#logoparent{
height: 50px;
}
#menu{
float:right;
font-family:"Courier New", Courier, monospace;
margin-left: 10px;
}
#menuend {
float:right;
font-family:"Courier New", Courier, monospace;
margin-left: 10px;
}
.clear{
clear: both;
}
Starting my first Tumblr layout.
For some reason, the columns are all a little to the left, and not centered within #content.
Not sure what I am doing wrong... any help would be very much appreciated.
Also... if anyone viewing this has any advice or sees a better way of doing these columns, I would love to hear it.
Thanks
Sam
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
text-align: center;
}
#wrap {
height: auto px;
width: 920px;
margin: 15px auto;
border: 1px black solid;
}
#header {
margin: 10px;
}
#content {
}
#column1 {
}
#column2 {
}
#column3 {
}
#footer {
}
.title {
font-size:25px;
}
.subtitle {
font-size:16px;
}
.column {
width: 300px;
float: left;
}
</style>
<title>{title}</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="title">
{title}</div>
<div class="subtitle">
{description}</div>
</div>
<div id="content">
<div id="column1" class="column">
column1
</div>
<div id="column2" class="column">
column2
</div>
<div id="column3" class="column">
column3
</div>
</div>
<div id="footer" class="subtittle">
copyright {copyrightYears} {title}
</div>
</div>
</div>
</body>
</html>
Your container is more than 900px (300px x 3) wide.
Set column width to 33.3% (near enough 1/3 of the container width).
.column {
width:33.3%;
float: left;
}
http://jsfiddle.net/CZ9Lw/
i'm doing a project for learning purpose. i have a problem of getting left and right div's inside the main div. if anyone can point me out where is the problem in the code it will be most appreciated. thank you
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="template/css/test_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_wrapper">
<div class="wrapper">
<div class="head"></div>
<div class="nav"></div>
<div id="main">
<div class="left">some data</div>
<div class="right">some data</div>
</div><!--end main-->
<div class="footer">
</div><!--end footer-->
</div><!--end wrapper-->
</div><!--end main_wrapper-->
</body>
</html>
CSS code
#charset "utf-8";
/* CSS Document */
body,td,th {
font-family: Arial, Helvetica, sans-serif;
margin-top:0px;
background-color:#FF0000;
}
#main_wrapper {
width:950px;
margin:auto;
background-image: url(../images/bg_a.png);
background-repeat:repeat-y;
}
.wrapper {
background-color:#009900;
margin-left:5px;
margin-right:5px;
}
.head {
height:115px;
}
.nav {
height:30px;
}
#main {
padding:10px;
margin:5px;
background-color:#0099FF;
}
.left {
width:600px;
float:left;
}
.right {
width:300px;
float:right;
}
.footer {
height:50px;
}
try this:
#main {
padding:10px;
margin:5px;
background-color:#0099FF;
overflow: hidden;
}