I want the two div containers inside the .firstcontainer div to appear side by side so I gave them the display: inline-block, but that doesn't seem to work.
.firstcontainer {
display: block;
}
.imagecontainer {
display: inline-block;
margin-left: 70px;
}
.SeasonCounterContainer {
margin-left: 20px;
display: inline-block;
}
<div class="centralcontainer">
<div class="firstcontainer">
<div class="imagecontainer">
<img src="http://subs-40ea.kxcdn.com/posters/better-call-saul.jpg" alt="">
</div>
<div class="SeasonCounterContainer">
<p>46 min | Crime, Drama</p>
</div>
</div>
</div>
Note: I've already tried different solutions but none worked for me.
You have to use a width setting on those inline-blocks to get them side by side, since the default width of inline-blocks is the width of their contents, up to 100% of the parent. Also the image width needs to be restricted to not become more than the width of its container.
.firstcontainer {
display: block;
}
.imagecontainer {
display: inline-block;
margin-left: 70px;
width: 200px;
}
.imagecontainer img {
width: 100%;
height: auto;
}
.SeasonCounterContainer {
margin-left: 20px;
display: inline-block;
width: 150px;
}
<div class="centralcontainer">
<div class="firstcontainer">
<div class="imagecontainer">
<img src="http://placehold.it/600x400/fa0">
</div>
<div class="SeasonCounterContainer">
<p>46 min | Crime, Drama</p>
</div>
</div>
</div>
Related
I want to align the image to left, then its title then the text below it.
Here is the screenshot of what I want to make.
I have made DIV for each content. I dont know if its okay to do that.
I made it, because I ll have more control for individual content.
But I havent ben able to do so.
.howtocontainer {
height: 1985px;
width: 1121px;
background-image: url("//azlily.bex.jp/eccube_1/html/template/default/img/howto/background.png");
}
.firstsection {
/*background: rgb(255,255,255,0.3);*/
background: grey;
height: 200px;
position: relative;
top: 300px;
margin: 0 40px 0 40px ;
}
.firstpic {
padding-top: 20px;
}
.firstsecbanner {
float: right;
margin-right: 500px;
margin-top: -15px;
}
<div class ="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsecbanner">
<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>
All I did was Included image and text in one DIV
But gave a class to image by <img class="class" src"path" >
Then I did float:left to .img class.
There are 2 key points that you should notice about using float:
Float container should be set a specific width (absolute or relative width)
clear all floating items
You should change your HTML structure a little bit, and add some CSS styles:
.firstpic {
float: left;
width: 300px; /*this width is equal with its image's width */
}
.description {
float: left;
width: calc(100% - 300px);
}
/* Clear floating item */
.firstsection::after {
display: table;
content: "";
clear: both;
}
<div class="firstsection">
<div class="firstpic">
<img src="the-image-on-left-side">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="the-title-image-on-top">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br>
してください。<br>
最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ<br>
ティックな気分を高めることができます。<br><br>
性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。<br>
シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を<br>
見つけてください。
</div>
</div>
</div>
Please add absolute URL instead of relative URL to see your pictures.
Hope this helps.
A disadvantage of using floats is that it disturbs the natural document flow. You may want to consider an alternative using flexbox.
.firstsection {
display: flex;
}
.firstpic {
width: 300px;
/*this width is equal with its image's width */
}
.description {
width: calc(100% - 300px);
}
<div class="howtocontainer">
<div class="firstsection">
<div class="firstpic">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/01.jpg">
</div>
<div class="description">
<div class="firstsecbanner">
<img src="//azlily.bex.jp/eccube_1/html/template/default/img/howto/firstsecbanner.png">
</div>
<div class="firstsectext">
お好みの量（目安はピンポン玉大です）を手に取って、パートナーの性感帯を指の腹や手のひらで優しくマッサージ<br> してください。
<br> 最初は背中や首筋、そして胸などと、段々と敏感な部分へ伸ばしていくと、ヌルヌルと滑る感覚が気持ちよく、エロ
<br> ティックな気分を高めることができます。
<br><br> 性感帯は塗った部分が敏感になり、ただ触れるだけでも極上の気持ち良さ。
<br> シュチュエーションに合わせてラブローションの香りを変えたりしながら楽しみ方を
<br> 見つけてください。
</div>
</div>
</div>
<div class="secondsection"></div>
<div class="thirdsection"></div>
</div>
I've a problem with the overflow hidden, it doesn't work at all with my container percentage width, here an example of the html and css structure:
<div class="container">
<div class="container-inner">
<div class="box-container">
<div class="box-overflow">
<div class="box-overflow-inner" style="width: 3680px; left: 0px; display: block; position: relative;">
<div class="box-item">
</div>
<div class="box-item">
</div>
</div>
</div>
</div>
</div>
I know it is quite nested but here it is the css:
.container { width: 100%; display: inline-block; }
.container-inner { width: 100%; display: inline-block; }
.box-container { width: 100%; display: inline-block; }
.box-overflow { overflow: hidden; position: relative; width: 100%; }
The problem seems with the 'container' element, if I add a fixed width everything seems to work correctly, but with a percentage width, all the contents takes the 3680px and I don't know why.
Any help it'd really appreciated!
Thank you all!
.wrapper {
width: 100%;
height: 150px;
}
.iconBar div {
float: left;
font-size: 18px;
}
div.iconBar {
display: table;
margin: 0 auto;
}
.iconBar img {
height: 35px;
width: 35px;
vertical-align: middle;
}
<div class="wrapper">
<div class="iconBar">
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/convenient.png"> Convinient, All-Inclusive Weekly Price
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/Insurance.png"> Insurance
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/mileage.png"> Milage Allowance & Expenses
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/tractorTrailer.png"> Tractor & Expandable Trailer
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/professionalDriver.png"> Professional Driver
</div>
</div>
</div>
Why is my div not centering? I am having trouble making the div center. I tried a bunch of solutions from other people and i got it to work in one of the tests, but this one is not working?
Edit: iconBar Div, i want the text and icons to be centered. It needs to look like the bottom picture
Going by your image remove float:left and add display: inline-block; to .iconBar div {...} and add text-align: center; to div.iconBar {...}
.wrapper {
width: 100%;
height: 150px;
}
.iconBar div {
display: inline-block;
font-size: 18px;
}
div.iconBar {
display: table;
text-align: center;
margin: 0 auto;
}
.iconBar img {
height: 35px;
width: 35px;
vertical-align: middle;
}
<div class="wrapper">
<div class="iconBar">
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/convenient.png"> Convinient, All-Inclusive Weekly Price
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/Insurance.png"> Insurance
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/mileage.png"> Milage Allowance & Expenses
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/tractorTrailer.png"> Tractor & Expandable Trailer
</div>
<div>
<img src="http://eventtoursolutions.com/wp-content/uploads/2017/02/professionalDriver.png"> Professional Driver
</div>
</div>
</div>
I'm trying to put two images side by side and make them responsive. The problem now is, that the second image wraps first and then reacts to the size of the browser.
I want them to stay on the same line (level) and change their size automatically and wrap at a certain point (this part isn't the problem)....
The html:
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
The css:
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
.itemwrapper {
display: inline;
}
img {
max-width: 100%;
height: auto;
}
use display table to set it side by side and keep it side by side and responsive.
display: table; with table-layout: fixed; will create a fluid layout for child elements with display: table-cell;
this will not only keep them the same width but also keep the containers the same height.
vertical-align: top; will keep them aligned to the top alternatively you can change the vertical position to middle and bottom plus some others.
Any questions just fire away.
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
#outer {
display: table;
width: 100%;
table-layout: fixed;
}
.itemwrapper {
display: table-cell;
vertical-align: top;
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
if image are same size or same ratio, you may use flex , width and min-width to set a break point:
#outer {
width:70%;/* demo*/
margin:auto;/* demo*/
display:flex;
flex-wrap:wrap;
}
#outer>div {flex:1;}
#outer>div>img {
width:100%;
min-width:200px;/* demo*/
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
remove or reset to your needs the rules commented with demo.
Thanks for the help, but I'm doing it with a different solution now, whicha friend suggested:
#outer {
position: relative;
width: 50%;
height: 0;
margin: 30px auto 0 auto;
padding-top: 25%;
background-color: #999;
}
.itemwrapper {
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.item2 {
left: 50%;
}
#outer img {
height: 100%;
max-width: 100%;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper item2">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
This evokes another problem though. The images arent filling the itemwrappers. I think i need to write some js for this :S.
I have a html page with a page title.
The height of the page title is determined by the height of the users photograph. The users photograph can be any size.
The issue that I cannot solve myself is that I am trying to vertical-align the text title to the middle of the title holder, but I am not able to figure this out if the photo has a dynamic height (the max-height is 149px). Assigning a specific height to the div does allow the middle vertical alignment, but as the users photograph can be any height, assigning a set height can make the appearance seem odd.
Here is what I am trying to achieve:
Does someone know how to vertical align middle the users name with a dynamic height? I have read several similar SO posts, tried several things but I cannot get this to work.
Here is my html code:
<div class="resumeStyleNameTitleWrapper">
<div class="resumeStyleNameTitle">
<div class="resumeStyleNameTitleInner">
<div class="resumeStyleNameTitleFontChange">Users Name</div>
</div>
</div>
<div class="resumeStyleNameTitlePhotograph">
<div class="resumeStyleNameTitlePhotographInner">
{# image has max-height: 149px & max-width: 149px; assigned in the css file #}
<img id="id_name_details_photograph" class="name_details_photograph_preview_dimensions" src="{{ name_details_photograph_url }}" />
</div>
</div>
</div>
Here is my CSS:
.resumeStyleNameTitleWrapper {
display: table-cell;
width: 100%;
}
.resumeStyleNameTitle {
direction: ltr;
display: table-cell;
float: left;
text-align: left;
width: calc(100% - 159px); /*less the width of the photograph plus 10px */
background-color: lime;
}
.resumeStyleNameTitleInner {
direction: ltr;
display: table-cell;
max-height: 149px;
text-align: left;
vertical-align: middle;
width: 100%;
background-color: orange;
}
.resumeStyleNameTitleFontChange {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleNameTitlePhotograph {
direction: ltr;
display: table-cell;
float: right;
max-height: 149px;
max-width: 149px;
text-align: right;
vertical-align: top;
}
.resumeStyleNameTitlePhotographInner {
display: inline-block;
vertical-align: middle;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}
Example: http://jsfiddle.net/kevalbhatt18/78Lzadtt/2/
I solved your Problem by putting resumeStyleNameTitlePhotograph clss in to resumeStyleNameTitleInner
<div class="resumeStyleNameTitleWrapper">
<div class="resumeStyleNameTitle">
<div class="resumeStyleNameTitleInner">
<div class="resumeStyleNameTitleFontChange">Users Name</div>
</div>
<div class="resumeStyleNameTitlePhotograph">
<div class="resumeStyleNameTitlePhotographInner">
<img id="id_name_details_photograph" class="name_details_photograph_preview_dimensions" src="">
</div>
</div>
</div>
</div>
So now if your image size change then your text div will also change its height depending upon image div size
Simplify your markup
One div containing a text element and an img:
The parent div is given display: table and text-align: right to align the image to the right
The names element (h2 in my example) is given display: table-cell and vertical-align: middle to keep it vertically centered. text-align: left brings the name to the left
The image is given vertical-align to remove the default baseline gap
Full Example
Compatibility: display: table is recognised in IE8+ and all modern browsers.
* {
margin: 0;
}
.name {
background: #F00;
display: table;
width: 100%;
text-align: right;
}
.name > img {
max-height: 149px;
max-width: 149px;
vertical-align: middle;
}
.name > h2 {
text-align: left;
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
<div class="name">
<h2>John Smith</h2>
<img src="http://www.placehold.it/200X100" />
</div>
Try this
.container {
display: table;
width: 80%;
background: green;
padding: 5px;
}
.first-child {
display: table-cell;
text-align: center;
vertical-align: middle;
background: yellow;
}
.second-child {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
color: red;
font-size: 20px;
}
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x150" />
</div>
</div>
<br/>
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x200" />
</div>
</div>
<br/>
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x100" />
</div>
</div>
I will simply use table to accomplish this task. Neat and simple. No messing around with CSS, and I don't have to worry about browser compatibility.
Just ensure to set valign (vertical alignment) to middle on the column for username.
<table width="100%" border="0">
<tr>
<td width="52%" valign="middle">Username</td>
<td width="29%"> </td>
<td width="19%"><!-- IMAGE HERE --></div></td>
</tr>
</table>
HERE IS A FIDDLE