I have three adjacent divs of equal width and I'm trying to figure out why the contents of the first, which has an additional button inside, pushes down the other two divs. Is it a display issue? I'd rather understand the cause before trying to manually top-align them. Thanks!
Here is my markup:
<div id="events-cont">
<div class="events-row">
<div class="event-card">
<img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
<div class="event-card-info">
<h1>Event title</h1>
<h2>Event date</h2>
<h2>Event venue</h2>
<p>
Event description
Learn More
</p>
<a class="tickets-button" href="#">Buy Tickets</a>
</div>
</div>
<div class="event-card">
<img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
<div class="event-card-info">
<h1>Event title</h1>
<h2>Event date</h2>
<h2>Event venue</h2>
<p>
Event description
Learn More
</p>
</div>
</div>
<div class="event-card">
<img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
<div class="event-card-info">
<h1>Event title</h1>
<h2>Event date</h2>
<h2>Event venue</h2>
<p>
Event description
Learn More
</p>
</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
#events-cont {
padding: 30px 0;
.events-row {
.event-card {
padding: 0 15px;
display: inline-block;
width: 33%;
img {
display: block;
width: 100%;
}
.event-card-info {
padding: 15px;
min-height: 300px;
text-align: left;
background: #ededed;
.tickets-button {
display: inline-block;
margin: 30px;
padding: 10px 30px;
font-size: 1.8em;
}
}
}
}
}
Demo: http://codepen.io/ourcore/pen/eBWxLz
Your .event-cards are inline-block so they are by default vertically aligned to the baseline.
Use vertical-align: top on the .event-card class:
.event-card {
vertical-align: top;
}
http://codepen.io/anon/pen/ZBKwPO
Because the default value of vertical-align is baseline. This should fix it.
.event-card {
...
vertical-align: top;
}
I would float the divs. Update this part of your CSS:
#events-cont .events-row .event-card {
padding: 0 15px;
display: inline-block;
width: 33%;
float: left; //added to stop the divs from being pushed down.
}
Related
So I have multiple div tags, each one represents a inline-block. Each div has an image and headings as text. I want to be able to display them side by side, as seen from this image:
(For this image, see the "Getting Started" section, as this is what I'm referring to specifically.)
My question is how do I achieve this structure? I've tried positioning the images and text side to side, but it didn't work in the code below.
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
.Step1,
.Step2,
.Step3 {
display: inline-block;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
.Step1 {}
.Step2 {}
.Step3 {}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div class="Step1">
<img src="#" alt="#">
<h2 style="margin: 0px;">Step 1: Select your year level above</h2>
</div>
<br>
<div class="Step2">
<img src="#" alt="#" width="">
<h2>Step 2: Choose a level of difficulty you feel cofident with</h2>
</div>
<br>
<div class="Step3">
<img src="#" alt="#">
<h2>Step 3: Select a topic and click on "Read More"</h2>
</div>
<br>
</div>
https://jsfiddle.net/ct69hkbg/
Your mistake is in your css making div elements with class "step1, step2, step3" to inline-block.
You have to make display of children of these elements to inline-block
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
.step h2,
.step img {
display: inline-block;
vertical-align: middle;
}
.step img {
margin-right: 10px;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
refactored your code a bit and replaced "step1, step2, step3" to step as you can see in the code
check this out: https://jsfiddle.net/gj02r3dn/
Remove your Step1...3 classes from your HTML and your CSS.
Remove the <br> tags.
Use div:nth-of-type(odd) img and div:nth-of-type(odd) img selectors to
float your images left/right alternatingly.
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
.Getting-Started div:nth-of-type(odd) img {
float: left;
}
.Getting-Started div:nth-of-type(even) img {
float: right;
}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div>
<img src="#" alt="#">
<h2>Step 1: Select your year level above</h2>
</div>
<div>
<img src="#" alt="#" width="">
<h2>Step 2: Choose a level of difficulty you feel confident with</h2>
</div>
<div>
<img src="#" alt="#">
<h2>Step 3: Select a topic and click on "Read More"</h2>
</div>
</div>
Here is the Simple Code
HTML
<h3>
<span class="first-label">This is the main label</span>
<span class="secondary-label">secondary label</span>
</h3>
CSS
.first-label:after {
content: '\A';
white-space: pre; }
try this code:
.Getting-Started {
background-color: lightBlue;
padding-top: 20px;
padding-bottom: 50px;
}
.Step {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
border: 1px solid #000;
text-align: right;
}
.Step:nth-child(2n) {
flex-direction: row;
text-align: left;
}
.Step h2 {
flex: 0 0 60%;
}
img {
width: 150px;
height: 150px;
background-color: yellow;
border: 2px solid yellow;
}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div class="Step">
<img src="#" alt="#">
<h2 style="margin: 0px;">Step 1: Select your year level above</h2>
</div>
<div class="Step">
<img src="#" alt="#" width="">
<h2>Step 2: Choose a level of difficulty you feel cofident with</h2>
</div>
<div class="Step">
<img src="#" alt="#">
<h2>Step 3: Select a topic and click on "Read More"</h2>
</div>
</div>
heading element <h1> through <h6>, hence can't be displayed inline or inline-block. Use inline elements instead for eg. span.
https://jsfiddle.net/snehansh/xdw9cp50/4/
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
.Step1, .Step2, .Step3 {
display: inline-block;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
.Step1 {
}
.Step2 {
}
.Step3 {
}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div class="Step1">
<img src="#" alt="#">
<span>Step 1: Select your year level above</span>
</div>
<br>
<div class="Step2">
<img src="#" alt="#" width="">
<span>Step 2: Choose a level of difficulty you feel cofident with</span>
</div>
<br>
<div class="Step3">
<img src="#" alt="#">
<span>Step 3: Select a topic and click on "Read More"</span>
</div>
<br>
</div>
I have kind of titles on my website which looks like this:
The problem appears when I rezise the window:
My text is being moved up and I want it to stretch down. Here is my HTML code:
<div class="inner, header2">
<div class="first">
<img src="images/clean/kim_icon.png" alt="" />
</div>
<div class="second">
<p class="section">S.I.M.B.A. (Smart Infant Management and Breath Aid)</p>
</div>
</div>
And my CSS:
.header2 {
text-align: left;
padding: 3em 6em 0em 6em;
overflow: hidden;
position: relative;
}
.first { //image
float: left;
}
.second { //text
float: left;
position: absolute;
bottom: 0em;
left: 12em;
}
p{
font-size: 2.75em;
margin-bottom: 1em;
line-height: 100%;
margin: 0 0 2em 0;
}
An option is to use a flexbox. The text will be placed at the bottom where possible.
.header2 {
display: flex;
}
.second {
align-self: flex-end;
}
p {
font-size: 2.75em;
margin: 0;
}
<div class="inner header2">
<div class="first">
<img src="http://placehold.it/100" alt="" />
</div>
<div class="second">
<p class="section">S.I.M.B.A. (Smart Infant Management and Breath Aid)</p>
</div>
</div>
I have some css issues. I'm trying to remove the space between a image and a label, and it does not work.
This is what I have:
And this is what I want:
I have problems with removing the space below he pictures and the same problem with the labels and the other div below them. In the same time I do not know how to position inline the headers from the footer.
This is my fiddle with my html and css:
https://jsfiddle.net/cwd6qw3o/
div img {
display: inline-block;
height: 30%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
display: inline-block;
margin-top: 0;
text-align: left;
width: 23%;
}
div.subcolor {
background-color: #ba0927;
display: inline-block;
height: 5px;
width: 23%;
}
div.footer {
display: inline-block;
background-color: #e6e6e6;
width: 100%;
height: 5%;
}
Please tell me what i am doing wrong :).
Thanks !
I think it is not a good structure in your HTML,why not wrap your item in the same li such as
<ul>
<li>
<img src="~/Content/cont1.png"/>
<p>Bosch Car Service</p>
</li>
<li>
<img src="~/Content/cont2.png"/>
<p>Afspraak Proefrit</p>
</li>
<li>
<img src="~/Content/cont3.png"/>
<p>Afspraak onderhoud</p>
</li>
<li>
<img src="~/Content/cont4.png"/>
<p>Routebeschrijiving</p>
</li>
</ul>
You can remove spaces with the following CSS:
div {
font-size: 0;
}
div.subtitle {
font-size: 1rem;
}
Live preview: JSFiddle
Additional styling is necessary.
please try below code
div::after {
content: "";
width: 60%;
}
.image-div {
float: left;
width: 100%;
}
div img {
float: left;
height: 30%;
margin-right: 1%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
float: left;
margin-right: 1%;
margin-top: 0;
text-align: left;
width: 23%;
}
.sub-div {
float: left;
width: 100%;
}
div.subcolor {
background-color: #ba0927;
float: left;
height: 5px;
margin-right: 1%;
width: 23%;
}
<body>
<img src="~/Content/slide1.png" id="slide" />
<div class="image-div">
<img src="http://dummyimage.com/200x200/000/fff"/>
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
</div>
<div class="sub-div">
<div class="subtitle">
Bosch Car Service
</div>
<div class="subtitle">
Afspraak Proefrit
</div>
<div class="subtitle">
Afspraak onderhoud
</div>
<div class="subtitle">
Routebeschrijiving
</div>
</div>
<div>
<div class="subcolor" id="sub1"></div>
<div class="subcolor" id="sub2"></div>
<div class="subcolor" id="sub3"></div>
<div class="subcolor" id="sub4"></div>
</div>
<div class="footer">
<div class="images">
<img src="~/Content/fb.jpg"/>
<img src="~/Content/contact.jpg"/>
<img src="~/Content/route.jpg"/>
</div>
<div class="information">
<div class="contact">
<h1>Houman BVBA</h1>
<label>Boterstraat 6</label>
<label>B-2811 Hombeek (Mechelen)</label>
<label>Tel. 015 41 39 39</label>
<label>Fax. 015/43 24 40</label>
</div>
<div class="schedule">
<h1>Openingsuren</h1>
<label>Maandag: 9u-12u|13u-18u</label>
<label>Dinsdag: 9u-12u|13u-18u</label>
<label>Woensdag: 9u-12u|13u-18u</label>
<label>Donderdag: 9u-12u|13u-18u</label>
<label>Vrijdag: 9u-12u|13u-18u</label>
<label>Zaterdag: 9u-12u|13u-18u</label>
</div>
</div>
</div>
</body>
I'm not a UI expert and attempting to achieve the below structure with html. the image is pretty much self explanatory of what i am after.
so far i have tried a few things but was unsuccessful and i have posted my mediocre attempt below. any help would be greatly appreciated.
<style>
.field-wrapper{
}
.input-control-container
{
}
.validation-message-container
{
}
.help-icon-container
{
}
.field-description-container
{
}
</style>
<div class="filed-wrapper">
<div class="field-label-container">
#Html.LabelFor(m => m.Email)
</div>
<div class="input-control-container">
#Html.TextBoxFor(m => m.Email)
<div class="field-description-container">
Here goes the description
</div>
</div>
<div class="validation-message-container">
#Html.ValidationMessageFor(m => m.Email)
</div>
<div class="help-icon-container">
<img src="/help-icon.png" /> <!--help popup handle by JavaScript--->
</div>
Alright, I whipped up a quick example of how to do this on JSFiddle.
HTML
<div class="FormElement">
<div>
<label for="test">Feild Label</label>
<input type="text" id="test" name="test" placeholder="Feild Input" />
<i class="fa fa-question">Icon</i>
</div>
<p>
Some description text here
</p>
</div>
All I do is set all the objects in the sub-div of .FormElement to display: inline-block, and set their width to all be ~33% of the page. Then, I can align the text of the label to be near the center, and have a <p> at the bottom span the full width.
CSS
.FormElement label,
.FormElement input,
.FormElement i.fa
{
display: inline-block;
width: 32%;
}
.FormElement label
{
text-align: right;
padding: 0 0 10px 0;
}
.FormElement p
{
text-align: center;
}
Note
The fa fa-question in the <i> is an example FontAwesome icon, so don't be thrown off by that.
Here's how I might go about it:
.field-outer {
display: table;
text-align: center;
margin: 20px auto;
}
.field-wrapper {
display: table-row;
text-align: center;
background: pink;
}
.field-wrapper > div {
display: table-cell;
vertical-align: middle;
padding: 6px 8px;
}
.input-control-container,
.field-label-container {
text-align: right;
}
.help-icon-container {
text-align: left;
min-width: 40px;
}
.help-icon-container img {
display: block;
}
<div class="field-outer">
<div class="field-wrapper">
<div class="field-label-container">
<label for="blah">Label</label>
</div>
<div class="input-control-container">
<textarea id="blah">Textarea</textarea>
</div>
<div class="help-icon-container">
<img src="http://placehold.it/40x40" />
<!--help popup handle by JavaScript--->
</div>
</div>
</div>
<div class="field-description-container">Here goes the description</div>
<div class="validation-message-container">#Html.ValidationMessageFor(m => m.Email)</div>
If you don't know the width of your container or want it to auto, you can use display: inline-block;.
Check this layout:
body {
text-align: center;
}
body * { box-sizing: border-box; }
.wrapper, .label-wrap, .input-wrap, .opt-wrap {
display: inline-block;
vertical-align: top;
padding: 5px 10px;
border: 1px solid #ddd;
}
.input-wrap {
width: 240px;
text-align: left;
}
.input-wrap input {
width: 100%;
display: block;
margin-bottom: 10px;
}
p {
padding: 0;
margin: 0;
}
<div class="wrapper">
<div class="label-wrap">
<span>Lorem ipsum</span>
</div>
<div class="input-wrap">
<input type="text" placeholder="Write here...">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="opt-wrap">
<span>?</span>
</div>
</div>
I have tried tried coding a comment list where the avatar is supposed to display on the left, and the name and comment are supposed to display on the right. Any help solving the issue is appreciated.
Outcome
Desired Outcome
HTML
<section>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
<div class='friend'>
<h3>John Smith</h3>
<p>Just another comment</p>
<img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
</div>
</section>
CSS
body {
font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
}
a {
color: #333;
text-decoration: none;
}
h1, h2, h3 {
font-weight: 400;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
img {
height: auto;
width: 100%;
}
section {
padding: 30px 60px;
}
.friend img {
height: 70px;
width: 100px;
display: block;
}
you would want to add float to your image
like
.friend img{
float:left;
}
here's a fiddle
Float your h3 and p tags to the right.
.friend h3, .friend p {
float: right;
}
Altneratively, have the image first and float it to the left.
http://css-tricks.com/all-about-floats/
https://developer.mozilla.org/en-US/docs/Web/CSS/float
I would recommend you to use inline-block instead of float in CSS with vertical-align, here you can see the result: http://jsfiddle.net/gG5uv/3/.
.friend img {
height: 70px;
width: 100px;
display: inline-block;
vertical-align: top;
}
.friend .data {
display: inline-block;
vertical-align: top;
}
I've also added a semantic separation between image and personal data of each item creating a div with class data.
Hey You can check your solution here at http://jsbin.com/edit/637/.
Just a few changes in your code.
HTML
<div class="friend">
<img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
<div id="friend-bio">
<h4>John Smith</h4>
<p>Just another comment</p>
</div>
</div>
<br>
<div class="friend">
<img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
<div id="friend-bio">
<h4>John Smith</h4>
<p>Just another comment</p>
</div>
</div>
<br>
<div class="friend">
<img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
<div id="friend-bio">
<h4>John Smith</h4>
<p>Just another comment</p>
</div>
</div>
and CSS
.friend #friend-image {
border: 1px solid #F0F2F8;
display: inline-block;
float: left;
height: 85px;
width: 84px;
}
#main #friend #friend-bio {
float: left;
font-size: 14px;
margin: -7px 0 0 20px;
width: 454px;
}
#main #friend #friend-bio h4 {
font-size: 18px;
font-weight: normal;
margin: 0 0 5px;
}