How to make the box size to be evenly as perfect square and make the words inside of it to shrink. I want to make it square and the inside word to shrink to small size based on the square, but they just flexing because of the contents.
This is my code, what should I change/remove/add?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mainbox {
background: grey;
display: flex;
margin: 5px;
}
.mainbox div {
flex: 1;
border: 2px solid black;
}
#row {
display: flex;
flex-direction: row;
}
#column {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<title>FlexSpiral</title>
</head>
<body>
<div class="mainbox">
<div>box 1</div>
<div>
box 2
<div id="row">
<div id="column">
<div id="row">
<div>box 5</div>
<div>
<div>box 6</div>
<div id="row">
<div>
<div id="row">
<div>box 9</div>
<div>box 10</div>
</div>
<div>box 8</div>
</div>
<div>box 7</div>
</div>
</div>
</div>
<div>box 4</div>
</div>
<div>box 3</div>
</div>
</div>
</div>
</body>
</html>
I didn't quite understand the question, but here goes
You can take the margin from the ".mainbox" that it is giving margin on all sides of the mainbox class.
To leave the div box occupying its own content you can use in the styling: display:inline-block
Note: a good practice is to use class instead of id to identify the styling, and id more for future interaction when using script and interactions.
Related
I have a homework in CSS.
My job is to draw a route of bus.
This is my html:
<div class="city-group">
<div class="city-name-wrapper">
<div class="city-name-line">
<div class="city-name">City 1</div>
</div>
</div>
<div class="stop-list">
<div class="stop">Stop 1</div>
<div class="stop">Stop 2</div>
<div class="stop">Stop 3</div>
<div class="stop">Stop 4</div>
<div class="stop">Stop 5</div>
</div>
</div>
<div class="city-group">
<div class="city-name-wrapper">
<div class="city-name-line">
<div class="city-name">City 2</div>
</div>
</div>
<div class="stop-list">
<div class="stop">Stop 6</div>
<div class="stop">Stop 7</div>
<div class="stop">Stop 8</div>
</div>
</div>
I have to style it like The pircture below:
Stops are grouped by city.
Each group has a Vertical bracket on left.
Rotated label with City name On the bracket line.
I tried this css, but i don't now how to make it work...
Here is link for JsFiddle:
https://jsfiddle.net/edm6qrt2/
I prefare to use modern CSS, including flex or grid.
I need suppoort only for Google Chrome.
Thenk's for any help!
One approach would be to use pseduo elements to create the left-most vertical line
that spans the height of the city group.
Additionally, you could align the city-name along that vertical line via a CSS transform, as documented in the code snippet below:
.city-group {
position:relative;
/* Create space to left of city group to
accomodate the city name and lines */
padding-left:2rem;
}
/* Define pseudo element for vertical black
line to the left, spanning the vertical axis
of the city group */
.city-group:before {
content:"";
display:block;
border-left:1px solid black;
left:.75rem;
top:1rem;
bottom:1rem;
position:absolute;
}
/* Transform the city name with translation and
rotation to place in line with line spanning left
of city group */
.city-name {
transform: translate(-50%, 0%) rotate(-90deg) translateY(50%);
position: absolute;
left: 0;
top: 50%;
margin-top:-0.5em;
border:2px solid orange;
background:white;
padding:0 1rem;
z-index:1;
}
/* Create spacing above/below each stop */
.stop {
padding:0.5rem 0;
position:realtive;
}
/* Style pseudo elements for first and last
stop which are the horizontal line segments
for these stops. These line segments connect
with the vertical line defined above */
.stop:first-child:before,
.stop:last-child:before {
content:"";
display:block;
border-top:1px solid black;
left:.75rem;
width:0.75rem;
position:absolute;
}
/* Offset first line segement from top of
city group */
.stop:first-child:before {
top:1rem;
}
/* Offset last line segement from bottom of
city group */
.stop:last-child:before {
bottom:1rem;
}
<div class="city-group">
<div class="city-name">
City 1
</div>
<div class="stop-list">
<div class="stop">Stop 1</div>
<div class="stop">Stop 2</div>
<div class="stop">Stop 3</div>
<div class="stop">Stop 4</div>
<div class="stop">Stop 5</div>
</div>
</div>
<div class="city-group">
<div class="city-name">
Long City 2
</div>
<div class="stop-list">
<div class="stop">Stop 6</div>
<div class="stop">Stop 7</div>
<div class="stop">Stop 8</div>
<div class="stop">Stop 9</div>
<div class="stop">Stop 10</div>
</div>
</div>
I have a row of fixed width flex items, and a footer element that should span the width of the combined elements above. How can I go about doing this?
Here is what I have so far, however, the bottom row is wider than the width of the first row.
<div class="container">
<div class="container" style="flex-basis: 100%">
<div style="width: 50px;">Div 1</div>
<div style="width: 50px;">Div 2</div>
<div style="width: 50px;">Div 3</div>
</div>
<div style="width: 100%">Div 4</div>
</div>
.container {
display : inline-flex;
flex-flow: row wrap;
}
.container > div {
border: 1px solid black;
background: #ececec;
}
https://jsfiddle.net/y1kham4u/1/
you better reset flex-direction than flex-wrap:
.container {
display: inline-flex;
flex-flow: column;/* no wrapping needed */
}
.container .container {
flex-direction: row;/* reset */
}
.container>div {
border: 1px solid black;
background: #ececec;
}
* {
box-sizing: border-box;
}
<div class="container">
<div class="container" style="flex-basis: 100% /* not really needed , but does not hurt */">
<div style="width: 50px;">Div 1</div>
<div style="width: 50px;">Div 2</div>
<div style="width: 50px;">Div 3</div>
</div>
<div style="width: 100%">Div 4</div>
</div>
https://jsfiddle.net/qm9o27ed/ (with also an inline-grid)
OKay first of all
https://flexboxfroggy.com/
play this game this game will help you to learn flex-box its pretty funnier way to learn flex-box properties
and for your problem and Use following jsfiddle
https://jsfiddle.net/dupinderdhiman/4d58c2nh/2/
.container {
display: inline-flex;
flex-flow: column;
border: 1px solid black;
background: #ececec;
}
.innerContainer{
display: flex;
flex-grow: 1;
}
.innerContainer > div {
border: 1px solid black;
background: #ececec;
}
<div class="container">
<div class="innerContainer" style="">
<div style="width: 50px;">Div 1</div>
<div style="width: 50px;">Div 2</div>
<div style="width: 50px;">Div 3</div>
</div>
<div style="width: 100%">Div 4</div>
</div>
https://jarodpeachey.github.io/breeze_css/layout.css
If you use this framework, you can easily create rows. The col-4 means it's 4 out of 12 grid spaces. If we set the width of the row to 150, each div will take up 50 pixels. (*Note: I would recommend using the framework to understand how it works, and then copy the code onto your local machine, as this framework is for my personal use, and the code may change)
<div class="container">
<div class="row m-auto" style="width: 150px">
<div class="col col-4">Div 1</div>
<div class="col col-4">Div 2</div>
<div class="col col-4">Div 3</div>
<div class="col col-12">Div 4</div>
</div>
</div>
Hope this helps!!
Forget how to code a div style table.
I haven't coded html in years and am pretty rusty. I'm trying to create a responsive div style table with the first div spans the entire column with 2 more divs next to it. A div with 2 cells on top and a div that spans the 2 cells on bottom.
I'm trying to create something that looks like this image.
<div class="table">
<div class="row">
<div class="cell">cell 1</div>
</div>
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>
Use flexbox. By assigning display: flex; to the .table, .row, and .column elements, child elements of each all become flexible and can easily be controlled to take up certain percentages of space within the table, and grow to fill all the available space like a table would.
The flex property takes a little getting used to. Here I used it to tell flex items to grow (the first value, flex-grow), and starting widths (the third value, flex-basis). This resource makes it pretty easy to understand: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* { box-sizing: border-box; }
.table,
.row,
.column {
display: flex;
}
.column {
flex: 1 0 50%;
flex-direction: column;
}
.first-column {
flex-basis: 33%;
}
.cell {
flex: 1 0 100%;
padding: 20px;
border: 1px solid dodgerblue;
}
.first-row .cell {
border-left: none;
}
.second-row .cell {
border-top: none;
border-left: none;
}
<div class="table">
<div class="column first-column">
<!-- just the one cell in this column -->
<div class="cell">cell 1</div>
</div>
<div class="column">
<!-- need 2 rows here -->
<div class="row first-row">
<!-- first row will have 2 columns -->
<div class="column">
<div class="cell">cell 2</div>
</div>
<div class="column">
<div class="cell">cell 3</div>
</div>
</div>
<div class="row second-row">
<div class="cell">cell 4</div>
</div>
</div>
</div>
How can I place 4 divs next to each other which width's will be calculated automatically (since every resolution of a monitor is different).
So whenever I have 16 divs, the amount shown div's still has to be 4.
I thought of giving a percentage, for each div. But that doesn't seem to be working (which is pretty obvious since every monitor has a different resolution of their screen displaying)
Just add a width using a percentage value (25%) which will put 4 boxes next to each other on each line.
.box {
float: left;
width: 25%;
}
I suggest you use a framework like bootstrap.
But this is the basic requirement you need to show 4 divs in a row...
just ignore the background and the div:nth-child(even) - I added that just so you could see the div areas clearly.
section {
max-width: 960px;
margin: auto;
}
div {
width: 25%;
float: left;
background: cornsilk;
}
div:nth-child(even) {
background: lightgreen;
}
<section>
<div>number 1</div>
<div>number 2</div>
<div>number 3</div>
<div>number 4</div>
<div>number 5</div>
<div>number 6</div>
<div>number 7</div>
<div>number 8</div>
<div>number 9</div>
<div>number 10</div>
<div>number 11</div>
<div>number 12</div>
<div>number 13</div>
<div>number 14</div>
<div>number 15</div>
<div>number 16</div>
</section>
You can better use Bootstrap framework.
for example,
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="searcharea col-md-12">
<div class="col-md-12">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
</body>
</html>
I have a div with variable length lines of text in it. Right now I have something like
<div id="container" style="width: 500px">
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</div>
I can text-align: center the container, but I want each line to be left justified relative to the longest line which is truly centered, as opposed to each line being centered on its own.
Is there an easy CSS way to do this... or should I resort to using tables to lay this out?
Your html:
<div id="container">
<span>
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</span>
</div>
Your CSS:
#container {
width: 500px;
background: #eee;
text-align: center;
padding: 10px 0;
}
#container span {
display: inline-block;
background-color: #ccc;
}
#container span div {
text-align: left;
}
Demo: http://jsfiddle.net/G6ABA/
That should work:
<div id="container" style="width: 500px; text-align:center;">
<div style="text-align:left;">
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</div>
</div>
use
<span> </span>
and css
width:500px;
text-align:center;
position:absolute;
do you set pic or color to div background?
or better i said is it your div width important?
if not maybe this solution can solve your problem:
<div id="someID" style="width: auto; text-align:left;">
<div>line 1</div>
<div>line 2 is more longer</div>
<div>line 3</div>
</div>