I'd like to display price and description this way. And when the window width is resized, I want only middle part (inside blue rectangle) to be resized.
The red rectangle's width should not change for any window dimension.
I tried to use <table> tag, but it makes the first part to be wrapped.
Here is HTML snippet for this:
<table class="notfootable">
<tbody>
<tr>
<td><span class="usd">$</span><span class="monthly-cost">744.58</span></td>
<td>
<h4>Monthly Cost</h4>
<p class="nomargin">This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
</td>
</tr>
</tbody>
</table>
Note that <span class="usd"> has the following CSS attributes.
.usd {
vertical-align: top;
display: inline-block;
font-size: 11px;
color: #1587AC;
margin-top: 0.3em;
}
I added display: inline-block to add margin-top.
First, you don't want this to be formed inside of a table tag. It's not tubular data that inside of it. It's content.
Secondly, flexbox can come in handy to address this problem that you're having. It's easy to use and has many options to align your content on the x-axis and the y-axis within a div.
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices.
You can read more about flexbox at MDN.
With that in mind, I made a little sample to recreate what you want to achieve.
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.info {
display: flex;
}
.price {
display: flex;
align-items: center;
padding-right: 30px;
}
.cta {
display: flex;
width: 100%;
justify-content: flex-end;
}
#media screen and (min-width: 600px) {
.container {
display: flex;
width: 100%;
align-items: center;
}
.info {
width: 80%;
}
.cta {
display: block;
justify-content: initial;
width: 20%;
padding-left: 30px;
box-sizing: border-box;
}
}
<div class="container">
<div class="info">
<div class="price">
<span class="usd">$</span><span class="monthly-cost">744.58</span>
</div>
<div class="description">
<h4>Monthly Cost</h4>
<p>This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
</div>
</div>
<div class="cta">
<button>Billing details</button>
</div>
</div>
I believe to accomplish this you can use position: absolute on a <div> surrounding the blue rectangle and use position:relative on the parent container surrounding that element. On all other elements inside that container use position: relative.
Here is a somewhat similar question to yours:
DIV absolute positioning - maintain position after browser window resize
Hope this helps.
Enclose the two span of "usd" and "monthly-cost" within a div that has display display attributes of "inline-block" and a fixed width that is wide enough to accommodate the widest cost amount displays. This should keep those two spans inline as the display width is decreased.
You can make use of flex layouts as below:
HTML:
<div class="main">
<div class="left">
<span class="usd">$</span><span class="monthly-cost">744.58</span>
</div>
<div class="right">
<div class="right-top">
<h4>Monthly Cost</h4>
<p class="nomargin">This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
</div>
<div class="right-bottom">
<button>billing details</button>
</div>
</div>
CSS:
.main {
display: flex;
flex-direction: row;
}
.left {
align-self: center;
padding-right: 55px;
}
.right {
flex-direction:column;
}
More on flex layouts:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I am trying to place 4 divs over a background image that would keep relative position and size as the browser is resized.
Here is the desired layout:
I have a big background (pink) that is placed with:
#screenFiller {
width: 100vw;
height: 100vh;
background-size: contain;
background-image: url("myimg.png");
background-repeat: no-repeat;
}
There are 4 main divs (red boxes). The two tops ones (side by side) contain a button each (blue boxes) with text (white squiggly lines) above the buttons but still in the red. I am positioning the divs next to each other using:
.flex {
display: flex;
justify-content: Left;
flex: none;
}
The main problem I am having is with the two top divs in that one is not keeping its height (it shrinks to content). I do understand that I will need to handle reducing the text size using a media query or something.
The stripped-down HTML looks like:
<div class="flex ">
<div class="boxme">
<div>
<p class="boldtext">Blha blah balh</p>
<div style="margin:10%;">
<button type="button" class="bigbut gborder5" onclick="window.location.href=''">Syart New</button>
</div>
</div>
</div>
<div class="boxme marl100">
<div>
<p class="boldtext">blah</p>
<div>
<button type="button" class="bigbut gborder5" onclick="window.location.href=''">Start New</button>
</div>
</div>
</div>
</div>
With boxme being:
.boxme {
background-color: white;
width: 25%;
height: 10%;
text-align: center;
}
Finally, all four divs are wrapped in a div with the following css
.relpos {
position: relative;
top: 36%;
left: 4%;
width: 85%
}
Please feel free to take me on an alternate path.
Bootstrap is available if that helps but currently, everything is just HTML and CSS.
Thank you in advanced for any consideration.
Normally, you never want to have fixed width, height, margin or paddings.
For your question, your flex values should be to put your content in the bottom left corner:
.container {
display: flex;
align-items: flex-end;
flex-direction: row; // default
}
Here is the full example that can be run as code snippet:
body {
height: 100vh;
}
body {
background-color: #fcf;
}
.container {
display: flex;
align-items: flex-end;
gap: 20px;
height: 100%;
padding: 20px;
}
.container>div {
background-color: #faa;
padding: 10px;
}
<div class="container">
<div>
<p>Text</p>
<button>Cick</button>
</div>
<div>
<p>Text</p>
<button>Cick</button>
</div>
</div>
I would strongly advise you to learn the fundamentals of html and css from other resources.
I'm having a bit of trouble to produce the below with flex box. I'd like a centrally aligned "title" with some buttons to the right (2,3,4).
The code below gets me close, but it's not perfectly aligned and loses it when the window resizes.
Any suggestions?
.header {
display: flex;
height: 50px;
align-items: center;
justify-content: center;
}
.title {
width: 250px;
margin-left: auto;
margin-right: 15%;
}
.btn-group {
margin-right: 15%;
}
<div class="header">
<h1 class="title"></h1>
<div class="btn-group">
<button id="btn_1" class="selected">2</button>
<button id="btn_2">3</button>
<button id="btn_3">4</button>
</div>
</div>
Here's a clean and simple process to get you to your layout:
First, note that CSS pseudo-elements (i.e., ::before and ::after), when applied to flex containers, are treated as flex items.
Create a pseudo-element to serve as the first flex item in the container.
Make the pseudo consume all available space (i.e., set it to flex: 1)
Do the same with your button group (.btn-group) on the opposite end (i.e., set it to flex: 1)
Now, with the outer items pressuring from both sides, the title is pinned to the middle of the container.
Make the button group container a flex container.
Set that container to justify-content: center.
Now, the individual buttons are horizontally centered on the right side of the already centered title.
.header {
display: flex;
height: 50px;
align-items: center;
}
.header::before {
content: "";
flex: 1;
}
.btn-group {
flex: 1;
display: flex;
justify-content: center;
}
<div class="header">
<h1 class="title">1</h1>
<div class="btn-group">
<button id="btn_1" class="selected">2</button>
<button id="btn_2">3</button>
<button id="btn_3">4</button>
</div>
</div>
To better understand the concepts and methodology at work here, see this post:
Center and right align flexbox elements
Here are my suggestions when using flexbox layout. You do not need to set the width on the element because the width will resize dynamically. When you set display as flex in the container, the x-axis would change to row by default then use flex property for 'title' class to expand the width to double the width of 'btn-group'. As the result, the second div will push all the way to the right and you can add the width of margin-right as how much you want it to be. Also, I would create another div after header and give it a class name as 'title' instead of giving it on h1. That way you would have two children that allow you to control it. See below how I fixed it:
h1 {
text-align: center;
}
.header {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.title {
flex: 1;
}
<div class="header">
<div class="title">
<h1>This is a title</h1>
</div>
<div class="btn-group">
<button id="btn_1" class="selected">2</button>
<button id="btn_2">3</button>
<button id="btn_3">4</button>
</div>
</div>
Website imageI'm trying to get these two pieces of text to sit next to each other rather than on top of each other. I also want them to be responsive to screen size adjustment.
'Carttext' is positioned where I want it on the screen when 'Icontext' is removed and is responsive to screen size adjustment.
I want 'Icontext' to sit just to the left of it but I can't seem to achieve this with it still being responsive to screen size changes. Any tips would be much appreciated, Code is below.
<div id="Icontext";
style="position: relative;">Login</DIV>
<div id="Carttext";
style="position: relative;">Cart</DIV>
you can achieve this using simply display:inline-block to both element or you can use display: flex. for spacing between element you can use margin or padding
.flex-container {
display: flex;
margin: 20px; /* spacing to screen*/
justify-content: flex-end;
}
.flex-container div:first-child {
margin-right: 20px; /* for spaceing between element */
}
<div class="flex-container">
<div id="Icontext">Login</div>
<div id="Carttext">Cart</div>
</div>
Try adding the following css:
#Icontext, #Carttext{
display:inline-block;
}
Here is the kind of thing that #mplungjan is suggesting with display: inline-block; which is probably preferable than using float: left;.
Also note that I removed the ; between the ID and style references. It's also probably best to be doing these style changes in CSS as shown below.
You can add margin: 10px; to add space between them and above them.
.links {
margin: 10px;
position: relative;
display: inline-block;
}
<div id="Icontext" class="links">Login</div>
<div id="Carttext" class="links">Cart</div>
Another way is using Flexbox. You can adjust the space between the items with margin-right.
.container {
display: flex;
justify-content: flex-start;
}
#Icontext {
margin-right: 10px;
}
<div class="container">
<div id="Icontext">Login</div>
<div id="Carttext">Cart</div>
</div>
Hopefully this isn't an unsolved task, but I'm trying to vertically justify an unknown (ish) number of divs inside of a container.
Each div should be equal distances from each other, and, additionally, the same distance from the edges. (Assuming the last part can be accomplished using ghost elements before and after)
The divs will each fill the width of the container, and the container is a set height, but the number of elements inside the container is unknown.
I'm assuming it can be done using Flexbox to some degree, but have been unsuccessful in my attempts thus far.
Yep, flexbox is the simplest way to do it.
On the container element:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
On the child elements:
.container div {
flex: 1;
width: 100%
}
For the spacing between the elements, just add padding to the container and bottom margins to the children.
The style would look like this:
.container {
/* Same as above, and */
padding: 20px;
}
.container div {
/* Same as above, and */
margin-bottom: 20px;
}
.container div:last-of-type{
margin-bottom: 0;
/* So that spacing is even at bottom and top of container */
}
(I was typing this when you posted your answer, so I put it up anyway)
Fiddle
I use justify-content:space-evenly.
HTML:
div.container {
display: flex;
}
div.one_item_container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
<div class="container">
<div class="one_item_container">
<img height="30" src="hello.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="50" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="40" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
</div>
As usual, no matter how long I search, I find the answer only immediately after I ask the question. :D
For those curious, or for my own future reference: Flexbox's justify DOES work, you just need a few more options:
HTML:
<div id="outer-container">
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
</div>
CSS:
#outer-container {
height: 250px;
width: 200px;
background: red;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.inner-element {
width: 200px;
height: 10px;
background: blue;
}
https://css-tricks.com/almanac/properties/j/justify-content/
https://jsfiddle.net/WW3bh/
I'm trying to achieve a certain fluid layout where the content of each DIVs are centered vertically and horizontally. But, my middle row (A, B, C) keeps on having vertical and/or horizontal alignment issues.
The goal is to have it work like this:
Note: If there's a way I can have the option to set the Mobile layout's "C" area fluid as well (without having to change the HTML, just the CSS, so that I can test which option works best), that'd be a bonus!
Here's a snippet of the HTML:
<div class="page">
<div class="col col-top">top</div>
<div class="col col-mid">
<div class="col col-left">
<div class="centerBox"><div class='debugBox'></div></div>
</div>
<div class="col col-center">
<div class="centerBox"><div class='debugBox'></div></div>
</div>
<div class="col col-right">
<div class="centerBox"><div class='debugBox'></div></div>
</div>
</div>
<div class="col col-bottom">bottom</div>
</div>
I'm not sure if the "wrapper" DIVs with the "centerBox" class is really necessary (they're set as display: table-cell while each col class are set to display: table to behave like tables, but this causes issues to place those areas with position: absolute and % values for their left / right / top / bottom properties.
For instance, if the "C" area is set to display: table, this happens:
And if I change the "C" area to display: block;, then it fills that full center area, but...
... the horizontal and vertical alignment breaks inside of it.
Would using "Ghost" DIV elements (as discussed in this css-tricks article, "Centering in the Unknown" by Chris Coyier ) be any better to get the correct alignment?
Ok, this solution works without a framework, pure CSS using flexbox. As long as the layout is horizontal, C has a fixed width. When it is mobile, C takes up the whole width and has a variable height.
header,
footer {
padding: 10px;
background-color: lightblue;
}
main {
display: flex;
flex-direction: row;
}
main > div {
padding: 10px;
background-color: tomato;
flex-grow: 1;
min-height: 40px;
display: flex;
align-items: center;
}
main > div:nth-child(2) {
background-color: olive;
}
.fixed {
width: 400px;
}
#media (max-width: 768px) {
main {
flex-direction: column;
}
.fixed {
width: auto;
}
}
<header>Top</header>
<main>
<div>A</div>
<div class="fixed">C</div>
<div>B</div>
</main>
<footer>Bottom</footer>
Here is a pen (drag the border to see the mobile layout):
Codepen
Here are the styles for the code you have provided. The one thing to keep in mind is your middle column, being a fixed width, is what helps with the calc() function. 50% of HALF the width of the middle container. This will not work in IE 8 or less, so you'll have to write a JS solution if you care about those browsers.
.page {
width: 100%;
position: relative;
}
.col-top {
background: #0f0;
width: 100%;
height: 50px;
}
.page .col-mid {
width: 100%;
display: table;
}
.page .col-mid .col {
width: calc(50% - 250px);;
height: 100px;
background: #f00;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.page .col-mid .col-center {
width: 500px;
background: #00f;
}
.debugBox {
display: inline-block;
width: 20px;
height: 20px;
background: #000;
vertical-align: middle;
}
.col-bottom {
clear: both;
height: 50px;
background: #0f0;
}
and a working example here:
https://jsfiddle.net/g45pwedd/
And you don't need some of the container elements, as you stated.
UPDATE
Sorry, forgot to add for responsive. I wasn't sure if you still needed vertical align for responsive or not. This solution removes vertical align, as I doubt it's needed on a mobile display anyways:
#media (max-width: 768px) {
.page .col-mid .col {
display: block;
width: 100%;
}
}
https://jsfiddle.net/g45pwedd/2/
In bootstrap 4
to center the childs horizontally, use bootstrap-4 class
justify-content-center
to center the childs vertically, use bootstrap-4 class
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
Note: make sure to add bootstrap-4 utilities if this code does not work