I'm used to working with tables for aligning images and text, but this is not quite working with mobile devices. So I want to use CSS and DIVs instead, but I have no experience.
Basically I want to have three pictures centered, while writing text above each. They should be centered, but fill the screen that the viewer is using.
See both my CSS (a start that was not working) and the table I want it to look like below: http://beautebeaute.dk/#Hvordan
Thanks!
you can center by containing the elements in one div. make it center using margin auto and a width. then inside use sections or divs to float left and add width so that its centered. And the text is aligned using text-align.
If you are using image, dont float instead use margin:0 auto.
example http://jsfiddle.net/56Rns/3/
html
<div class="container">
<section>
<h3>Title1</h3>
<img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium
</p>
</section>
<section>
<h3>Title2</h3>
<img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium
</p>
</section>
<section>
<h3>Title3</h3>
<img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium
</p>
</section>
</div>
css
.container{
width:900px;
margin:0px auto;
}
section{
width:250px;
float:left;
text-align:center;
padding:10px;
}
img.pic{
width:170px;
margin:0 auto;
}
Related
In CSS I want to select the three first divs. I have this code:
div:nth-child(3n) {
background: red;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore laborum necessitatibus nobis obcaecati, mollitia, eos sint dolor odit. Possimus dolores recusandae sed totam, voluptatibus, voluptatum. Voluptatibus minus aut, quam ratione.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates perferendis et saepe omnis nemo, dolores quia ipsam ea blanditiis quaerat autem aut id itaque magnam recusandae sint architecto! Error, consequuntur.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem doloremque quis perspiciatis vel odio impedit itaque laborum eveniet quasi aperiam, autem cumque vero recusandae, voluptates et nesciunt quibusdam aliquid! Deleniti.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem doloremque quis perspiciatis vel odio impedit itaque laborum eveniet quasi aperiam, autem cumque vero recusandae, voluptates et nesciunt quibusdam aliquid! Deleniti.
</div>
I try above CSS but it does not work.
It's not working as expected because :nth-child(3n) will select every third element.
You need to select every element starting from the third one counting backwards, therefore you could use -n + 3 or -1n + 3.
In other words, given the pattern an+b, a should be 1 (or omitted) since you don't want to skip over elements. In addition, a should also be negative and b should be 3 since you're starting at the third element.
div:nth-child(-1n + 3) {
background: #f00;
}
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
It's worth pointing out that div:nth-child(-1n + 3) will only select the element if it is one of the first three elements and also an element type div. In other words, if the third element is a span, only the first two div elements will be selected:
div:nth-child(-1n + 3) {
background: red;
}
<div>First div</div>
<div>Second div</div>
<span>Span</span>
<div>Third div</div>
If the element types vary (like above), then you should use :nth-of-type() instead:
div:nth-of-type(-1n + 3) {
background: red;
}
<div>First div</div>
<div>Second div</div>
<span>Span</span>
<div>Third div</div>
This question already has answers here:
How to make Bootstrap 4 cards the same height in card-columns?
(22 answers)
Closed 9 months ago.
I using react with react-bootstrap. I want to design these card as a same height. For instance as in the attach image, when my second card title is break. So it needs to card height, then height of the second and 3rd card is increased, but first card has a small card title, so card take less height. I want all these card same heights, even other card height increase all card height increase.
is this possible with custom CSS or bootstrap classes?
If you can add custom CSS, using "display: flex" on the card's parent should do the trick. If you need to force the strech, you can add "align-items: stretch".
.wrapper {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.card {
background: grey;
padding: 15px;
width: 30%;
}
<div class="wrapper">
<div class="card">
<h1>hello</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
</p>
</div>
<div class="card">
<h1>hello</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
</p>
</div>
<div class="card">
<h1>hello</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
</p>
</div>
</div>
I've this example code:
<div class="container">
<div class="row">
<div class="left-block" style="background-color:#000000">menu</div>
<div class="text various">text article</div>
</div>
</div>
the left-block class have a background-color, but the background stop by height menu, but i like backgroud continued and stop end page, but example if insert in left-block padding-bottom=100% tha height left-block increase height by class="row" and class text-various, I like the padding stop height row or height text-various
help me please
As I understand you need something like this:
.row {
display: flex;
}
.left-block {
color: #fff;
padding: 8px;
}
.text {
padding-left: 8px;
}
<div class="container">
<div class="row">
<div class="left-block" style="background-color:#000000">menu</div>
<div class="text various">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia aperiam, ex fugiat! Ad odio voluptatem magnam, alias, voluptatibus vero corporis adipisci quos dicta, asperiores consequatur maiores iste unde dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia aperiam, ex fugiat! Ad odio voluptatem magnam, alias, voluptatibus vero corporis adipisci quos dicta, asperiores consequatur maiores iste unde dolore.
</div>
</div>
</div>
I am using a CSS only solution to get the appearance of equal height columns:
.equal-height-row {
overflow: hidden;
}
.equal-height-col {
padding-bottom: 99999px;
margin-bottom: -99999px;
}
So that when I do this:
<div class="equal-height-row">
<div class="left equal-height-col">
<p>This is the first column.</p>
</div>
<div class="right equal-height-col">
<p>This is the second column.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.</p>
</div>
</div>
...both columns appear to be the same height. The problem I am running into is when an internal anchor link is visited, everything above it is being cut off of the page.
Here is a jsfiddle: https://jsfiddle.net/7ctkL4yx/
Notice just scrolling the HTML, it looks great. Now, try clicking a link and notice all the content above it gets chopped off.
How can I correct this?
.left {
float: left;
width: 50%;
background: red;
}
.right {
float: left;
width: 50%;
background: blue;
}
.equal-height-row {
overflow: hidden;
}
.equal-height-col {
padding-bottom: 99999px;
margin-bottom: -99999px;
}
<p>
First<br />
Second
</p>
<div class="equal-height-row">
<div class="left equal-height-col">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.
</p>
</div>
<div class="right equal-height-col">
<p id="first">FIRST ANCHOR<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.
</p>
<p id="second">SECOND ANCHOR<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae optio, tenetur ipsa. Veritatis, consequatur? Optio totam, hic voluptate eos magnam aspernatur. Accusamus similique aperiam, soluta, omnis corporis reprehenderit illum quasi.
</p>
</div>
</div><!--/.equal-height-row-->
overflow: hidden cuts off anything beyond the certain part of the element, and when you jump to a link, you jump to that line of the text. There's no natively CSS solution for the default link behavior to change, alas. Instead, you want overflow: scroll instead on your .equal-height-row class to preserve the height without any content being cut off.
Or you could just use flexbox, and give the .equal-height-row a display property of flex to establish it as your flex container. With flexbox, you won't need the padding-bottom: 99999px;margin-bottom: -99999px; hack for establishing equal column height, so your CSS would be:
.left {
background: red;
}
.right {
background: blue;
}
.equal-height-row {
display: flex;
}
I hope this question makes sense. I'm stummped at what to do. I am currently developing a site where a section of the page will have two seperate background colors (1 for the left and 1 for the right). This is what I am trying to go for:
<div class="gray-bg">
<div class="span6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, consequuntur illo impedit libero nam voluptatem sed facere earum quam ullam velit iste necessitatibus aperiam dolor id. Quod rerum est vel.</p>
</div>
</div>
<div class="white-bg">
<div class="span6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci quam sapiente ut iusto neque. Obcaecati, molestiae, consequuntur qui blanditiis libero odio fuga eum iusto illo eaque inventore ipsa eligendi ipsam!</p>
</div>
</div>
I've tried several varations of this, putting rows under the span, putting containers and subrows in the span, but I'm not able to create the affect I want. Can anyone please help out? Thanks!
Update: Heres a JSFiddle of what I am trying to do. It works, but its not in a container to space out the row correctly. When I put it in the container, The blue on the left does not extend all the way.
http://jsfiddle.net/BVmUL/622/
try the following: Bootply demo
<div class="container">
<div class="row">
<div class="span6">
<div class="gray-bg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, consequuntur illo impedit libero nam voluptatem sed facere earum quam ullam velit iste necessitatibus aperiam dolor id. Quod rerum est vel.</p>
</div>
</div>
<div class="span6">
<div class="white-bg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci quam sapiente ut iusto neque. Obcaecati, molestiae, consequuntur qui blanditiis libero odio fuga eum iusto illo eaque inventore ipsa eligendi ipsam!</p>
</div>
</div>
</div>
</div>
css:
.gray-bg {
background-color:red;
}
.white-bg {
background-color:green;
}