I'm trying to figure out a way to group divs as "words" that will float as a series and line break depending on the width of the container. So the HTML looks like this:
<div class="word">
<div class="letter">t</div>
<div class="letter">o</div>
<div class="letter">o</div>
</div>
<div class="word">
<div class="letter">c</div>
<div class="letter">o</div>
<div class="letter">o</div>
<div class="letter">l</div>
</div>
So if the container allowed it, you would see "too cool" on one line, but if the container was too small, "cool" would appear on the next "line." I can't figure out what CSS will group the letters so they don't break and roll to the next line.
Totally open to using Bootstrap if it helps.
It makes more sense to me to replace the div's with class letter to spans
.word {
display: inline-block;
white-space:nowrap;
}
#container {
width:9%;
border:solid 1px green;
}
<div id='container'>
<div class="word">
<span class="letter">t</span>
<span class="letter">o</span>
<span class="letter">o</span>
</div>
<div class="word">
<span class="letter">c</span>
<span class="letter">o</span>
<span class="letter">o</span>
<span class="letter">l</span>
</div>
</div>
Related
I tried to align several items by using two columns and positioning the text, icon, and line within the left column and the other text on the right column, but they don't align properly. It currently looks like this but it should look like the picture attached. How can I fix this?
<div class="col-12">
<h1 class="orange">LET'S RUB IT IN</h1>
<h2>How Much?</h2>
</div>
<div class="col-6"> <!--left column-->
<div class="circle side">
<img src="./chemical#2x.png" alt="chemical" class="icon">
</div>
<h5 class="side">1 Shot Glass<br>or 1 oz.</h5>
<div class="line v side"></div> <!--vertical line-->
</div>
<div class="col-6"> <!--right[enter image description here][1] column-->
<p>To fully cover your body, you'll need about 1 ounce of sunscreen or just enough to fill a shot glass.</p>
</div>
It looks like the issue is you aren't using the .container > .row > .col convention. You've skipped the .container, and are sometimes skipping the .row. Additionally, you are not using the grid for the section shown in your screenshot.
Refer to the Bootrap documentation when there are Bootstrap issues.
https://getbootstrap.com/docs/5.0/layout/grid/
The first thing is you should wrap all/most of your <body> content in a <div class="container-fluid">.
Then add any missing .rows.
This is what you have:
This is what you should have:
Write the contents of that next section to match your design.
ex.
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-6" style="border-right: 2px solid orange;">
<div class="circle side" data-sr-id="9" style="visibility: visible; opacity: 1; transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
<img src="./chemical#2x.png" alt="chemical" class="icon">
</div>
</div>
<div class="col-6">
<h5 class="side">1 Shot Glass<br>or 1 oz.</h5>
<div class="line v side"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<p>To fully cover your body, you'll need about 1 ounce of sunscreen or just enough to fill a shot glass. </p>
</div>
</div>
You can Refere Bootstrap Grid System
Here:https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
It will fix your problem
I have three div elements which have h1 contents. I want first div at left side, 2nd at center and the 3rd at right side, meaning all in the row. When I resize the window (responsiveness), the text should not break into two lines but it should only minimize or maximize the gap between each div. Currently, all three div are very close to each other. It is written in wordpress, but here is code snippet of that part:
<div style="display:inline-block;">
<h1 style="color: white;">Yaqoob Yawar</h1>
</div>
<div style="display:inline-block;">
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar">
</div>
<div style="display:inline-block;">
<h1 style="color: white;">یعقوب یاور</h1>
</div>
It is implemented on the url: yaqoobyawar.com
Update your existing HTML
<div class="slot-c">
<div style="display:inline-block;">
<h1 style="color: white;">Yaqoob Yawar</h1>
</div>
<div style="display:inline-block;">
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
</div>
<div style="display:inline-block;">
<h1 style="color: white;">یعقوب یاور</h1>
</div>
</div>
with the this HTML which is using the Bootstrap 4 Grid.
<div class="row">
<div class="col">
<h1 style="color: white;">Yaqoob Yawar</h1>
</div>
<div class="col" style="text-align: center;">
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
</div>
<div class="col">
<h1 style="color: white;">یعقوب یاور</h1>
</div>
</div>
Also, remove the d-flex class from its parent div.
.grid-container {
display: grid;
grid-template-rows: 1fr;/* No. of row You want to create */
grid-template-columns: 1fr 1fr 1fr; /*No. of column you want to create */
}
<div class="grid-container">
<div>
<h1 >Yaqoob Yawar</h1>
</div>
<div>
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar">
</div>
<div >
<h1 >یعقوب یاور</h1>
</div>
</div>
I am trying to make this table only by using divs because I will use Angular Components in it and, as I know, it's not working with table tag.
This is my code by now,
https://codepen.io/teodora-malec/pen/vQdJPr
I tried display: block for month, kv, date and tag and it worked and then I tried
<div class="wrapper">
<div class="left">
<label class="month">MONTH</label>
</div>
<div class="right month-name">
<label> MONTH-NAME & YEAR </label>
</div>
</div>
because I tried the solution from this question: How to place two divs next to each other?
and it looks like this
should I put the divs differently or my css code is wrong?
It's a good practice to use the class "clearfix", while playing around with float. Here is the link:What is a clearfix?
Secondly, your structure needs to be slightly modified for better /efficient coding. Though I have adjusted your needs in the provided solution, but my suggestion would be to go through your structure design once again.
Here is the working demo:
https://jsfiddle.net/posywj78/
Html
<div class="month-header">
<div class="wrapper clearfix">
<div class="left">
<label class="month">MONTH</label>
</div>
<div class="right month-name">
<label> MONTH-NAME & YEAR </label>
</div>
</div>
<div class="wrapper clearfix">
<div class="left">
<label class="kw">KV</label>
</div>
<div class="right">
</div>
</div>
<div class="wrapper clearfix">
<div class="left">
<label class="date">DATE</label>
</div>
<div class="right">
</div>
</div>
<div class="wrapper clearfix">
<div class="left">
<label class="tag">TAG</label>
</div>
<div class="right">
</div>
</div>
</div>
You should use below style.
<style>
.month, .kw, .date, .tag {
display: flex;
flex-direction:column;
}
.wrapper {
display: flex;
}
</style>
Preface: I cannot change the HTML.
To better explain my question, I have provided an illustration below. Essentially, I have two rows of divs - the first row has content, and the second row would have a button beneath the content.
I want to make the page responsive, so that the div with a button always is below its corresponding div with content, but the extra container divs are proving a challenge. Any ideas?
What I have (above) and what I want (below).
Here's the HTML code:
<div class="choice-section">
<div id="choice_1" class="choice odd" style="margin-top: 242px;">
<div class="content">asdf</div>
</div>
<div id="choice_2" class="choice even" style="margin-top: 322px;">
<div class="content">asdf</div>
</div>
</div>
<div>
<div class="vote-choice odd">
<a class="vote btn" href="javascript:void(null)" choice="1">Vote</a>
</div>
<div class="vote-choice even">
<a class="vote btn" href="javascript:void(null)" choice="2">Vote</a>
</div>
</div>
I would strongly reccomend looking at Bootstrap's grid and column system with which this can easily be achieved. This framework will make responsive design a breeze for you.
You can see an example of something pretty similar to what you are trying to achieve in a Plunker I very quickly put together
CSS:
.blue {
background-color:blue;
height:200px;
}
.red {
background-color:red;
height:200px;
}
.purple {
background-color:purple;
height:200px;
}
.green {
background-color:green;
height:200px;
} here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="red">
</div>
</div>
<div class="col-sm-3">
<div class="blue">
</div>
</div>
<div class="col-sm-3">
<div class="purple">
</div>
</div>
<div class="col-sm-3">
<div class="green">
</div>
</div>
</div>
This question has actually came from my experiments with GWT framework but I decided to simplify the question.
I'm trying to replace table tag with divs. How can I horizontally align two DIV tags that contain two vertically aligned DIV tags ?
Here is what I have:
<!doctype html>
<html>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
It's rendered in my Chrome 15.0.874.106 m as:
Name:
Address:
test1
test2
where I expected it to be:
Name: test1
Address: test2
Could you please help me ?
HTML tables are appropriate for representing tabular data. Just don't use tables for general layout. Tables are still better for tabular data though.
UPDATE: Going forward, you may want to consult the CSS3 Grid Layout specification: http://www.w3.org/TR/css3-grid-layout/
But as is, if you reeeeeeally want to make it work for whatever reason, I'd set all columns as fixed width, float left and clear on the first column. If you want different widths for different columns, you can make specific classes for those columns and set a specific width. But, if there's user data in your table, you have to make sure overflow:hidden is on, or it'll break your table.
I've pasted the code in here, but I've also created a jsfiddle link.
Here's the html:
<div class="table">
<div class="column first">Name:</div>
<div class="column">test1</div>
<div class="column first">Address:</div>
<div class="column">test2</div>
</div>
And the styles:
.table .column{
width: 100px;
float: left;
}
.table .column.first{
clear: left;
}
However, you're going to run into problems as the text inside the table changes. It's not going to act like a table. For example, when a cell's text wraps to the next line, it's not going to adjust the height of all the cells in that row, as you would expect a cell to do. Hence the overflow: hidden or just use an HTML table.
Hope that helps...
I think for the example you have an actual table would be more appropriate, however; you could also do something like this:
<body>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">Name:</div>
<div style="display: table-cell;">test1</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">Address:</div>
<div style="display: table-cell;">test2</div>
</div>
</div>
</body>
CSS3 has just the ticket:
.tabl {width:400px;border:1px solid blue;display:table}
.row {height:40px;display:table-row}
.cell {border:1px solid black;display:table-cell}
<div class="tabl">
<div class="row">
<div class="cell"> CELL one</div>
<div class="cell"> CELL two</div>
<div class="cell"> CELL three</div></div>
<div class="row">
<div class="cell"> CELL four
</div><div class="cell"> CELL five</div>
<div class="cell">
<div class="tabl">
<div class="row">
<div class="cell">CELL 6A</div>
<div class="cell">CELL6B</div>
</div>
</div>
</div>
</div>
</div>
That can then be allied to a structure that looks like a table In this case I've included a nested table:
If you want you can probably leave out the outside wrapper, unlike a real table the rows and cells seem not to need it. Unfortunately this only works in modern browsers that support CSS3 that leaves out IE including IE9.
<div style="display: block; ">
<div style="float:left">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="float:left">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
<div style="clear:both"></div>
</div>
your solution is as follow :-
PLease check it
<style type="text/css">
.Table
{
display: table;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
}
</style>
<!doctypehtml>
<html>
<body>
<div class="Row">
<div class="Cell">
<p>Name:</p>
</div>
<div class="Cell">
<p>Test1</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Address:</p>
</div>
<div class="Cell">
<p>Test2</p>
</div>
</div>
</body>
</html>
If you are looking to generate dynamic tabular structure, try using jqGrid (demo)
Or if your purpose is different and still wanna go with div? Try this..
use float:left; instead display:inline. Float shrinks the div to its content size, letting space for other elements. This makes other elements accommodate beside floated element.
Corrected code:
<!doctype html>
<html>
<body>
<div style="display: block; ">
<div style="float:left; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >Address:</div>
</div>
<div style="float:left;">
<div class="gwt-Label" >test1</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
Moe's way is pretty cool but it's not standard.
This is the best way.
Use CSS command "float" just like this:
HTML Code:
.gwt-Label
{
float: left;
width: 50%
}
<!doctype html>
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >test1</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >Address:</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>
Or you can have it all in one place:
<!doctype html>
<html>
<head>
<style type="text/css">
.gwt-Label{
float: left;
width: 50%
}
</style>
</head>
<body>
<div style="display: block; ">
<div style="display: inline; ">
<div class="gwt-Label" >Name:</div>
<div class="gwt-Label" >test1</div>
</div>
<div style="display: inline; ">
<div class="gwt-Label" >Address:</div>
<div class="gwt-Label" >test2</div>
</div>
</div>
</body>
</html>