Please take a look at my code, click the 'Run' button to see the result:
https://www.w3schools.com/code/tryit.asp?filename=FG1HLL1GNU7B
.outsideDiv {
background-color: green;
margin: auto;
width: 50%;
border: 1px solid black;
text-align: center;
padding: 10px;
}
.insideDiv {
background-color: yellow;
margin: 10px;
padding: 10px;
display: inline-block;
border: 1px solid black;
}
.shortItem {
background-color: white;
display: block;
color: black;
text-align: center;
padding: 7px 17px;
text-decoration: none;
float: right;
margin: 10px;
border: 1px solid black;
height: 30px;
width: 120px;
}
<div class="outsideDiv">
<div class="insideDiv">
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
</div>
</div>
What I want to achieve is showing here:
But I just unable to make it work. I want that when the user change the page width the gaps between the white items will stay fixed, 20px, and also that the gap between the most left and the most right items and the yellow div's border will be exactly 20px.
How can I do that?
(You can change my code, save it using the upper menu, and then give here a link to the fixed code)
Thanks!
Using display: flex saves some of the calculations in regards to positioning the .innerDiv and its children:
.outsideDiv {
display: flex;
justify-content: center;
align-content: center;
background-color: green;
margin: auto;
width: 50%;
border: 1px solid black;
padding: 10px 0;
}
.insideDiv {
background-color: yellow;
border: 1px solid black;
max-width: 90%;
}
.shortItem {
background-color: white;
display: inline-block;
color: black;
text-align: center;
padding: 7px 17px;
margin: 10px 0 10px 20px;
text-decoration: none;
border: 1px solid black;
height: 30px;
width: 120px;
}
<div class="outsideDiv">
<div class="insideDiv">
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
</div>
</div>
Take a look in full page mode to get the design in your image.
is that what you looking for . Let me know ... if its ok or not ?
https://www.w3schools.com/code/tryit.asp?filename=FG1J3XI6KHHM
you need to just change the float property which is set to right. Change it to the left and
see the result it would be same as you expected
Check This
Related
First of all, here is a codepen with the issue I am trying to solve.
This is a simplified version of the problem I have on an actual project. My goal is to keep the grid in the same format with 5 columns and to be able to increase the width of these cells so the content is always visible, but also so that it doesn't wrap before the first row of 5 columns is displayed. Whenever I try to increase the width of the cells the grid wraps and I lose the structure I want.
So, basically, increase width of items, but prevent wrapping, is it possible? It is fine if the content overflows the flex container itself, the goal is to add overflow-x to this grid.
.flex-container {
border: 1px solid silver;
display: flex;
width: 50%;
}
.wrap {
flex-wrap: wrap;
}
.wrap div {
background: gold;
}
.flex-item {
width: 160px;
border-bottom: 1px solid black;
border-right: 1px solid black;
line-height: 100px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container wrap">
<div class="flex-item">11111111111111</div>
<div class="flex-item">22222222222222</div>
<div class="flex-item">33333333333333</div>
<div class="flex-item">44444444444444</div>
<div class="flex-item">55555555555555</div>
<div class="flex-item">66666666666666</div>
<div class="flex-item">77777777777777</div>
<div class="flex-item">88888888888888</div>
<div class="flex-item">99999999999999</div>
<div class="flex-item">00000000000000</div>
</div>
From the comments, it does look like grid is the option you need, it won't allow content to be wrapping and justify content will stick it on the side if shorter thant the width of the container.
here is the snippet with grid:
/* flex turned into grid */
.flex-container {
border: 1px solid silver;
display: grid;
grid-template-columns:repeat(5,auto);
justify-content:start;
overflow:auto;
width: 80%;
}
.wrap {
}
.wrap div {
background: gold;
}
.flex-item {
border-bottom: 1px solid black;
border-right: 1px solid black;
line-height: 100px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container wrap">
<div class="flex-item">11111111111111</div>
<div class="flex-item">22222222222222</div>
<div class="flex-item">33333333333333</div>
<div class="flex-item">44444444444444</div>
<div class="flex-item">55555555555555</div>
<div class="flex-item">66666666666666</div>
<div class="flex-item">77777777777777</div>
<div class="flex-item">88888888888888</div>
<div class="flex-item">99999999999999</div>
<div class="flex-item">00000000000000</div>
</div>
I think, if it is allowable, that css grid may be a better candidate for the layout you are proposing...
.grid-container {
border: 1px solid silver;
display: grid;
width: 50%;
grid-template-columns: 20% 20% 20% 20% 20%; /* hard set five columns and no more */
}
.grid-container div {
background: gold;
}
.grid-item {
/* width: 160px; */
border-bottom: 1px solid black;
border-right: 1px solid black;
line-height: 100px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
overflow-x: hidden; /* overflow-x to hide overflow as discussed in question */
}
<div class="grid-container">
<div class="grid-item">11111111111111</div>
<div class="grid-item">22222222222222</div>
<div class="grid-item">33333333333333</div>
<div class="grid-item">44444444444444</div>
<div class="grid-item">55555555555555</div>
<div class="grid-item">66666666666666</div>
<div class="grid-item">77777777777777</div>
<div class="grid-item">88888888888888</div>
<div class="grid-item">99999999999999</div>
<div class="grid-item">00000000000000</div>
</div>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color:red;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
word-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div>11111111111111</div>
<div>22222222222222</div>
<div>33333333333333</div>
<div>44444444444444</div>
<div>55555555555555</div>
<div>66666666666666</div>
<div>77777777777777</div>
<div>88888888888888</div>
<div>99999999999999</div>
<div>00000000000000</div>
</div>
</body>
.container {
display: flex;
justify-content: start;
border-right:1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
margin-right: 20px;
margin-left: 20px;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before{
position: relative;
content: "";
width: 100%;
top: 1px;
right: 22px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>
I'm creating a page layout. Inside the container, there are two containers- side-nav and main-content. In the main-content, there is a p tag with some demo text. the p tag is surrounded by two border containers. I m not able to extend the border lines upto the main container width. I have given a snippet of it, Can someone please help me to resolve this issue.
If I understand you correctly, add flex: 1 to .main-content so it will take the whole width that left.
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
margin-right: 20px;
margin-left: 20px;
flex: 1;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before {
position: relative;
content: "";
width: 100%;
top: 1px;
right: 22px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>
But seems you have more problems here. For example, if there is no enough space, the right border is displayed on top of the text. Also, small extra top and bottom borders in the left of the .main-content. What're you trying to do? How it should look?
You have given right:22px in your :before. That's causing the issue here.
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.divider {
border-bottom: 1px solid gray;
}
.divider:before {
position: relative;
content: "";
width: 100%;
top: 1px;
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid gray;
}
p {
word-break: break-word;
padding:10px
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
<p style="padding:0 10px;margin:0">two</p>
<div class="divider"></div>
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<div class="divider"></div>
</div>
</div>
I honestly have no idea what you're trying to do here, but the modified example below looks a bit better, no?
.container {
display: flex;
justify-content: start;
border-right: 1px solid black;
}
.side-nav {
border-right: 1px solid #111;
height: 200px;
padding-right: 20px;
}
.main-content {
padding: 0 20px;
word-break: break-word;
}
.divider {
border-top: 1px solid tomato;
border-bottom: 1px solid gray;
display: block;
margin: 0 -20px;
position: relative;
}
<div class="container">
<div class="side-nav">
one
</div>
<div class="main-content">
two
<hr class="divider" />
<p>some content gdvsgsgfghdgfhgdsfgdsgfdsfgdsfgdsgfgdsfgdsgfdsgfdsgfgdsgfffdfghjfghj</p>
<hr class="divider" />
</div>
</div>
I don't see the reason for having the :before element within the divider if it then has the same color as the border anyways, you could just make the border 2px...or more generally, even if you need different colors, you can just work with top/bottom borders and you don't need the :before at all, you could also choose to got with an <hr /> element for that purpose, would be more semantic anyways =)
Please see my code here:
https://www.w3schools.com/code/tryit.asp?filename=FFTMB6LPPZZ5
(You need to click the 'Run' button to see the result)
What I want to achieve is that the 'insideDiv' (the yellow div) will:
Occupied much width as possible inside 'outsideDiv' (the green div).
Be centered inside 'outsideDiv' (again, the green div).
I want that the gap/space between the most left 'shortItem' (the white item) and the left border of the 'insideDiv' (the yellow div), will be EXACTLY (for example 20px) as the gap/space between the most right 'shortItem' and the right border of the 'insideDiv' (again, the yellow div).
How can I achieve that? if you will run my code and play with the width of the display section you will see that it's not keeping the same space on the right and on the left.
If you want you can change my example, save it using the icon on the top left near the 'Home' icon, and give here a link to the fixed code.
Hope you can help me with that, thanks!
My Code:
.outsideDiv {
background-color: green;
margin: auto;
width: 50%;
border: 1px solid black;
text-align: center;
padding: 20px;
}
.insideDiv {
background-color: yellow;
margin: 10px;
display: inline-block;
border: 1px solid black;
}
.shortItem {
background-color: white;
display: block;
color: black;
text-align: center;
padding: 7px 17px;
text-decoration: none;
float: right;
margin: 10px;
border: 1px solid black;
height: 30px;
width: 120px;
}
<div class="outsideDiv">
<div class="insideDiv">
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
</div>
</div>
Update:
I don't want to change the width of the 'shortItem' items (the white ones).
Here is an image that shows the problem that I'm trying to solve:
https://ibb.co/jDz92a
Here is a fiddle I created using your code. Kindly check if this is what you need
.outsideDiv {
background-color: green;
margin: auto;
width: 50%;
border: 1px solid black;
text-align: center;
padding: 5%;
}
.insideDiv {
background-color: yellow;
margin: 1%;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
border: 1px solid black;
width: auto;
}
.shortItem {
background-color: white;
display: block;
color: black;
text-align: center;
text-decoration: none;
float: right;
margin: 10px;
padding: 10px 20px;
border: 1px solid black;
height: 30px;
width: 100%;
max-width: 120px;
}
I have edited your code, which you can see here:
<!DOCTYPE html>
<html>
<head>
<style>
.outsideDiv {
background-color: green;
margin: auto;
width: 50%;
border: 1px solid black;
text-align: center;
padding: 20px;
}
.insideDiv {
background-color: yellow;
margin:0 auto;
width:100%;
display: block;
border: 1px solid black;
}
.shortItem {
background-color: white;
display: block;
color: black;
text-align: center;
padding: 7px 17px;
text-decoration: none;
float: right;
margin: 10px;
border: 1px solid black;
height: 30px;
width: 120px;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="outsideDiv">
<div class="insideDiv">
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="shortItem"></div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Is that what you were looking for?
Key edits made:
Clear the floating elements inside the innerDiv
Use margin:0 auto to center the innerDiv
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;
}
How to I align text to the right side of the image icon like the one in the example picture.
I would usually use "float:left" but it's for a mobile responsive design so I prefer not using things like "float:left" because it ruins the red divs height with responsive designs.
I have to align the title, subsitle and a little square image.
It is easy to use float: left and NOT break the height of red border div.
You only have to add display: table-cell to the .app_top block. Here's the solution:
.app_top {
display: table-cell;
}
.app_top img {
float: left;
}
See the working example. Here's the code.
You could use display: inline-block instead.
#main-container {
border: 5px solid #3F3F3F;
width: 270px;
}
.container {
width: 250px;
height: 200px;
border: 5px solid #7F0008;
margin: 5px;
}
.box {
display: inline-block;
vertical-align: top;
width: 85px;
height: 85px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 17px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.img {
background: url(http://placehold.it/100/25);
width: 100px;
height: 25px;
border: 5px solid #EBEAAE;
}
<div id="main-container">
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
</div>
Maybe another option is to put the attribute in a parent div instead of the element
html:
<div id="wrapper">
<div class="twoColumn">
<img src="https://pbs.twimg.com/profile_images/444650714287972352/OXTvMFPl.png" />
</div>
<div class="twoColumn">
<p> this is a testingalot test</p>
<button> mybutton </button>
</div>
</div
css:
#wrapper{
border: 1px solid black;
}
.twoColumn{
width: 49%;
float:left;
border: 1px solid red;
}
button{
width: 50px;
height: 40px;
background: red;
}
img{
max-width: 100%;
}
http://jsfiddle.net/Equero/df2wvcet/
I hope it's help
Most simple solution would be to change your markup structure by wrapping your spans in a div just the way you did with the image, then add .app_top div{display:inline-block} .app_top div span{display:block}
.top{
width: 95%;
position: fixed;
background-color: #f7f7f7;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 3%;
padding-right: 3%;
border-bottom: 1px solid #b2b2b2;
}
.search{
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
background-color: #e3e3e6;
}
.search::-moz-focus-inner {
border: 0;
padding: 0;
}
.items{
background-color: #ffffff;
width: 100%;
padding-top: 50px;
}
.app{
margin-left: 25px;
margin-right: 25px;
}
.app_top div{display:inline-block}
.app_top div span{display:block}
<div class="main">
<div class="top" >
<input type="text" class="search" />
</div>
<!-- Items -->
<div class="items" style="border: 1px solid black; padding-top: ">
<div class="app" style="border: 1px solid red;" >
<div class="app_top">
<div>
<img src="_img1.jpg" width="95"/>
</div>
<div>
<span class="app_txt" style="border: 1px solid aqua;"> text text - House text house! Las...</span>
<span class="ltd" style="border: 1px solid pink;"> textic-texttive ltd</span>
<span class="" style="border: 1px solid blue;"> </span>
</div>
</div>
<div class="app_bottom">
</div>
</div>
</div>
.content contains all text in right side. If you use overflow:hidden the height of div will stay normal.
img { float:left; }
.content { overflow:hidden; }