I've the following HTML and CSS structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css" media="screen">
/* #Skeleton - Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 0px; margin-right: 0px;}
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column,
.container .one.columns { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 920px; } /* was 940px */
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
/* #Site Styles
================================================== */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: Arial, sans-serif;
}
.border-top {
border-top: 1px solid black;
}
.border-right {
border-right: 1px solid black;
}
.border-bottom {
border-bottom: 1px solid black;
}
.border-left {
border-left: 1px solid black;
}
img {
width: 20%;
}
.blue-background {
background-color: #e1eaf5;
}
#photo-box {
position: absolute;
width: 150px;
height: 150px;
border: 1px solid black;
right: 40px;
top: 150px
}
#last-element {
margin-bottom: 30px;;
}
/* #Typography
================================================== */
h1 {
font-size: 24px;
}
p {
font-size: 16px;
padding-left: 3px;
}
em {
font-size: 12px;
}
.bold-text {
font-weight: 700;
}
.centered-text {
text-align: center;
}
.yellow-text {
background-color: #faff00;
}
</style>
</head>
<body>
<div class="container">
<div class="sixteen columns centered-text">
<h1>Erasmus / Exchange Öğrenci Başvuru Formu</h1>
</div>
<div class="twelve columns">
<img src="images/yeditepe-logo.png" alt="Yeditepe Logo" class="yeditepeLogo" />
</div>
<div class="four columns">
<p class="bold-text">YEDITEPE UNIVERSITY</p>
<em>OUTGOING PROGRAM</em>
</div>
<div class="sixteen columns">
<div id="photo-box" class="centered-text">
<p>PHOTO</p>
<em>resim ekleyiniz</em>
</div>
</div>
<div class="sixteen columns centered-text bold-text">
<p>OUTGOING</p>
<p>LLP - ERASMUS EXCHANGE / NON-ERASMUS</p>
</div>
<!-- <div class="three columns">
<p> </p>
</div> -->
<div class="sixteen columns bold-text centered-text">
<p>Applying for: Fall Term 20 Spring Term 20</p>
</div>
<div class="sixteen columns blue-background bold-text">
<p>1. PERSONAL INFORMATION</p>
</div>
<div class="eight columns border-top border-right border-bottom border-left">
<p>First Name:</p>
<p>Middle Name:</p>
</div>
<div class="eight columns border-top border-right border-bottom">
<p>Family Name:</p>
<p> </p>
</div>
<div class="eight columns border-right border-bottom border-left">
<p>Place of Birth: City or Town / Country</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="eight columns border-right border-bottom">
<p>Do you have a passport? ( ) yes ( ) no</p>
<p>Passport Country:</p>
<p>Passport No:</p>
<p><span class="yellow-text">Passport No:</span></p>
</div>
<div class="eight columns border-right border-bottom border-left">
<p>Female ( ) Male ( )</p>
</div>
<div class="eight columns border-right border-bottom">
<p>Date of Birth<em>(dd/mm/yy)</em>:</p>
</div>
<div class="sixteen columns border-right border-bottom border-left">
<p>T.C. Kimlik Numarası:</p>
</div>
<div class="five columns border-bottom border-left">
<p>Contact Address:</p>
<p>City:</p>
</div>
<div class="eleven columns border-right border-bottom">
<p> </p>
<p>Postal Code:</p>
</div>
<div class="eight columns border-right border-bottom border-left">
<p class="bold-text">Student Contact Tel</p>
<p>GSM:</p>
<p>Home Number:</p>
<p>E-mail:</p>
<p> </p>
</div>
<div class="eight columns border-right border-bottom">
<p class="bold-text">Parent Contact Tel</p>
<p>GSM:</p>
<p>Home Number:</p>
<p>E-mail:</p>
<p>E-mail:</p>
</div>
<div class="sixteen columns blue-background centered-text">
<p>Write year and circle the semester</p>
</div>
<div class="sixteen columns">
<p> </p>
</div>
<div class="sixteen columns blue-background bold-text">
<p>2. ACADEMIC HISTORY AT YEDITEPE UNIVERSITY</p>
</div>
<div class="eight columns border-top border-left">
<p>Your Department:</p>
<p>Current CGPA:</p>
</div>
<div class="eight columns border-top border-right">
<p>* Subject Area Code: </p>
<em>(select from the list on page 3)</em>
</div>
<div class="sixteen columns border-right border-left">
<p><span class="bold-text">Attach one photocopy of your recent transcript with this form:</span> applications submitted without transcripts attached will not be evaluated.</p>
</div>
<div class="sixteen columns border-right border-bottom border-left">
<p>Are you on scholarship at Yeditepe? <em>Burslu öğrenci statüsünde misiniz?</em> ( ) Yes ( ) No</p>
</div>
<div class="sixteen columns">
<p> </p>
</div>
<div class="sixteen columns blue-background bold-text">
<p>3. HOST UNIVERSITY DETAILS</p>
</div>
<div class="sixteen columns">
<em>Please write the name of the university and country of the exchange program to which you are applying for</em>
</div>
<div class="sixteen columns blue-background border-top border-right border-left">
<p>1st Choice</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Official Name of the University: .......................................................................................................... Erasmus ID Code: </p>
</div>
<div class="eight columns border-left">
<p>City:</p>
</div>
<div class="eight columns border-right">
<p>Country:</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Contact e-mail for their international office: </p>
</div>
<div class="sixteen columns border-right border-left">
<p>Program of Study: .................................................................................................................................................................................................</p>
</div>
<div class="sixteen columns blue-background border-right border-left">
<p>2nd Choice</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Official Name of the University: .......................................................................................................... Erasmus ID Code: </p>
</div>
<div class="eight columns border-left">
<p>City:</p>
</div>
<div class="eight columns border-right">
<p>Country:</p>
</div>
<div class="sixteen columns border-right border-left">
<p>Contact e-mail for their international office: </p>
</div>
<div class="sixteen columns border-right border-bottom border-left">
<p>Program of Study: .................................................................................................................................................................................................</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>Erasmus / Exchange Öğrenci Başvuru Formu</p>
</div>
<div class="sixteen columns border-top border-right border-bottom border-left">
<p>Program of Study ..............................................................................................................................................................................................</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>International study programs for a student to study abroad for one semester cost estimate is between 1500€ - 5000€ (euro) for transportation, housing, insurance, books, food, etc.</p>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Will you be able to financially support your semester abroad?</p>
<em>Yurt dışında geçireceğiniz semestre in maliyetini karşılayabilecek misiniz?</em>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Does your family agree with your decision to study abroad?</p>
<em>Aileniz yurt dışında bir semestre eğitim görme kararınız için izin veriyorlar rmı?</em>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Do you agree to provide the necessary documents to the International Office at Yeditepe in good order and on time?</p>
<em>Gereki dokümanları içeren dosyayı tam olarak ve zamanında Uluslararası Ofise teslim etmeyi kabul ediyor musunuz?</em>
</div>
<div class="four columns">
<p>( ) yes ( ) no</p>
</div>
<div class="twelve columns">
<p>Do you agree to go on your own to the appropriate consulate in good time with the required documents in order to obtain a visa?</p>
<em>Vize almak için gereken durumlarda konsolosluğa giderek vize işlemlerini kendiniz yapmayı kabul ediyor musunuz?</em>
</div>
<div class="sixteen columns">
<p class="bold-text">If you have answered ‘yes’ to all the above questions: <em>Yukarıdaki soruların hepsine ‘Evet’ yanıtı verdiniz ise</em></p>
</div>
<div class="sixteen columns">
<p>Do you understand that by agreeing to these commitments, if you are selected into a study abroad program, you agree to assume the responsibility of satisfying all financial requirements, presenting your documents and obtaining a visa, meeting deadlines, and fulfilling in general all obligations set forth by the regulations of the designated by the international study program?</p>
<em>Bu konularda gerekenleri yapmayı taahüt etmiş olarak öğrenci değişim programına kabul edilmeniz halinde bu program çerçevesinde belirtilen şartlara göre; mali gereksinimleri karşılamayı, gerekli dokümanları sunmayı, vizeyi almayı, program takvimine uymayı, genel şartları yerine getirmeyi taahhüt ediyormusunuz?</em>
</div>
<div class="sixteen columns centered-text">
<h1 class=""bold-text>( ) yes ( ) no</h1>
</div>
<div class="sixteen columns">
<p>I certify that the information given in this application is true, complete, and accurate to the best of my knowledge.</p>
<em>Bu başvuruda verdiğim bilgilerin hakikate uygun, tam, ve doğru olduğunu beyan ederim</em>
</div>
<div class="sixteen columns bold-text">
<p>Yeditepe University Student Registration ID Number:</p>
</div>
<div class="ten columns bold-text">
<p>Student’s Signature:</p>
</div>
<div class="six columns">
<p>Date<em>(dd/mm/yy)</em>:</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>TO BE COMPLETED by the Department Coordinator</p>
</div>
<div class="sixteen columns">
<p>_____ I have met with the student</p>
</div>
<div class="sixteen columns">
<p>_____ It has been discussed with the student if English is not the language of instruction; the student satisfies the level of language proficiency required by the host school in order to succeed in his/her courses</p>
</div>
<div class="sixteen columns">
<p>_____ I have informed the student of credits and any subject requirements needed to satisfy a full-load course curriculum during the period of studying abroad.</p>
</div>
<div class="sixteen columns centered-text bold-text">
<p>SUBMIT THIS COMPLETED FORM TO YOUR DEPARTMENT ERASMUS COORDINATOR</p>
</div>
<div class="sixteen columns border-top border-right border-left bold-text">
<p>Coordinator’s Name (full name printed):</p>
</div>
<div class="ten columns border-left bold-text">
<p>E-mail:</p>
</div>
<div class="six columns border-right bold-text">
<p>University Tel:</p>
</div>
<div class="ten columns border-bottom border-left bold-text">
<p>Department Coordinator Signature</p>
</div>
<div class="six columns border-right border-bottom bold-text" id="last-element">
<p>Date<em>(dd/mm/yy)</em>:</p>
</div>
</div><!-- container -->
<!-- End Document
================================================== -->
</body>
</html>
This structure is used in a CodeIgniter project with DomPDF to convert the structure into PDF.
The process happens successfully in terms of PDF creation but the representation of the PDF is utterly different from the expected CSS.
Here's an example PDF.
What is causing this? And how can I fix this?
Do you know the width of your PDF document (minus margins)?
As the Outgoing text is supposed to be centered, it is apparent that your HTML is much wider than the PDF document.
What version of DOMPDF are you using? The CSS float property is only supported from version 0.6.0 and on, and is disabled by default. use DOMPDF_ENABLE_CSS_FLOAT in the config to enable it.
Instead of setting widths in px, try using percentages.
.container .eight.columns {
width: 50%;
}
Related
I have a list of items that I am presenting in a flexbox table. My actual display has more columns, but in this question, I'll use just 2 - the 'category' and 'item' names. The data is presented in category order. Where items repeat for a category, only the first item for the category should have the category listed, for subsequent ones I want the category cell empty. As this can scroll off the top of the screen, I'd like to make this cell sticky, as I do for the headings.
However, as the cell is a child of the row, not the container of the table, it scrolls up with the row. You can see this in the first table in the example below, the '.first_item' CSS class does not hold the caption in place.
I concluded that the only way to achieve this is to insert a div before the row to present the category and make this sticky - class cat_head in the 2nd table in the example below. This works, however, it knocks the first item down and does not align where I want it to. I therefore set its height to 0px, which brings the item row back into alignment, but then have to put the text within an absolute positioned div within this so that I can set a background colour to stop text for the categories from overlaying each other.
It works really well and is exactly how I'd like it to operate - except that because the height is set to 0px, the absolute div extends below the bottom of the table as it is scrolled off the top of the screen and overwrites what is below it - you can see in the example it overwrites "Text below".
I also have to manually add an 'alt' class name on alternate rows to get background colouring rather than relying on ':nth-child(even)' - but I can live with this.
Has anyone got any suggestions for stopping it falling out of the bottom of the container, or indeed a better way of doing this? Thanks.
.pad {
height: 50px;
background-color: yellow;
}
.fill {
height: 120vh;
background-color: yellow;
}
.container {
background-color:#ffffff;
}
.row {
display: flex;
flex-flow:row wrap;
}
.head {
position: sticky;
top: 0px;
background-color: #e0e0e0;
font-weight: bold;
border-bottom: 1px solid #000000;
height: 24px;
z-index: 3;
}
.cell {
flex: 0 0 100px;
padding: 5px;
}
.first_item {
position: sticky;
top: 25px;
z-index: 2;
}
.table_1 .row:nth-child(even),
.table_2 .alt {
background-color: #f0f0f0;
}
.cat_head {
position: sticky;
top: 25px;
height:0px;
overflow: visible;
z-index: 2;
}
.cat_text {
position: absolute;
width: 80px;
padding: 0;
background-color: rgba(8,156,213,1);
color: #ffffff;
border: 1px solid #000000;
border-radius:5px;
margin:2px 0 0 4px;
text-align:center;
}
<div class="pad"></div>
<div class="container table_1">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div class="row cat">
<div class="cell first_item">Category 1</div>
<div class="cell">Item 1-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
<div class="row cat">
<div class="cell first_item">Category 2</div>
<div class="cell">Item 2-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
<div class="pad">Text below</div>
<div class="container table_2">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 1</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 2</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-1</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
<div class="fill">Text below</div>
OK. So I went to sleep on it and realised that the sticky positioning when scrolling off the top of the viewport is based on the bottom of its div. Therefore, I need to shift the div below the row it is on - as its 0px high and that's where its 'bottom' should be.
I also need to move the contained absolute div above it rather than below so its bottom aligns to it. I initially put a -24px top margin on the absolute div, but this stopped the sticky positioning on its parent for some reason. I therefore put a -24px top margin on the sticky div, which worked. However, it also dragged the next row up, so I also added a 24px bottom margin which resolved that.
I also added a containing div around each category's rows so that the sticky heading scrolls off screen when the next category gets to the top.
All working fine.
.pad {
height: 50px;
background-color: yellow;
}
.fill {
height: 120vh;
background-color: yellow;
}
.container {
background-color:#ffffff;
}
.row {
display: flex;
flex-flow:row wrap;
}
.head {
position: sticky;
top: 0px;
background-color: #e0e0e0;
font-weight: bold;
border-bottom: 1px solid #000000;
height: 24px;
z-index: 3;
}
.cell {
flex: 0 0 100px;
padding: 5px;
}
.alt {
background-color: #f0f0f0;
}
.cat_head {
position: sticky;
top: 27px;
height:0px;
margin: -24px 0 24px 4px;
overflow: visible;
z-index: 2;
}
.cat_text {
position: absolute;
width: 80px;
padding: 0;
background-color: rgba(8,156,213,1);
color: #ffffff;
border: 1px solid #000000;
border-radius:5px;
text-align:center;
}
<div class="pad"></div>
<div class="container">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-1</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
</div>
<div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-1</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
</div>
<div class="fill">Text below</div>
I have 4 columns of products with a header, description and image below and I want the text areas to at the top and the images to each line up at the bottom so they stay aligned when the screen is resized.
At the moment the images move up and down as the text wraps - which looks very untidy as they each have a different amount of text.
I have tried using tables and position absolute and they each cause problems and don't work properly.
Here is my code:
#product-landing .landing-row {
position: relative;
height: inherit;
}
.product-landing,
.product-landing-2,
.product-landing-3 {
margin-right: 2.0533%;
}
.product-landing,
.product-landing-2,
.product-landing-3,
.product-landing-4 {
margin-left: 0px;
display: inline-block;
position: relative;
height: 100%;
vertical-align: top;
width: 22.978%;
}
.product-landing-4 {
margin-right: 0px;
}
#product-landing p {
margin-top: 0px;
margin-bottom: 5px;
clear: both;
width: 100%;
}
.product-landing .land-image {
vertical-align: bottom;
}
.product-landing img,
.product-landing-2 img,
.product-landing-3 img,
.product-landing-4 img {
margin-top: 10px;
display: block;
max-width: 350px;
margin: 0 auto;
bottom: 0px;
width: 100%;
}
<div id="product-landing">
<div class="landing-row">
<div class="product-landing">
<div id="product-text">
<div id="offer-title">Product1</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image1.jpg">
</p>
</div>
<div class="product-landing-2">
<div id="product-text">
<div id="offer-title">Product2</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image2.jpg">
</p>
</div>
<div class="product-landing-3">
<div id="product-text">
<div id="offer-title">Product3</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image3.jpg">
</p>
</div>
<div class="product-landing-4">
<div id="product-text">
<div id="offer-title">Product4</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image4.jpg">
</p>
</div>
</div>
</div>
You can use flexbox for this
#product-landing .landing-row {
display:flex;
flex-direction:row;
justify-content:space-between;
flex-wrap:wrap;
}
#product-landing p {
margin-top: 0px;
margin-bottom: 5px;
}
.product-landing {
display:flex;
flex-direction:column;
width: 22.978%;
}
.product-landing img {
margin-top: 10px;
display: block;
max-width: 350px;
width: 100%;
}
.product-text {
flex-grow:1;
}
<div id="product-landing">
<div class="landing-row">
<div class="product-landing">
<div class="product-text">
<div class="offer-title">Product1</div>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://via.placeholder.com/350x150">
</p>
</div>
<div class="product-landing">
<div class="product-text">
<div class="offer-title">Product2</div>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://via.placeholder.com/350x150">
</p>
</div>
<div class="product-landing">
<div class="product-text">
<div class="offer-title">Product2</div>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://via.placeholder.com/350x150">
</p>
</div>
<div class="product-landing">
<div class="product-text">
<div class="offer-title">Product3</div>
<p><b><i>Product description Product description Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://via.placeholder.com/350x150">
</p>
</div>
<div class="product-landing">
<div class="product-text">
<div class="offer-title">Product4</div>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://via.placeholder.com/350x150">
</p>
</div>
</div>
Would've commented this if I could; Have you tried using flex-box? https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This has saved me on many occasions where relative/absolute combinations fail.
To be more specific;
.wrapper{
display:flex;
flex-direction:column;
}
.text-wrapper-div{
align-self:flex-start;
}
.image-wrapper-div{
align-self:flex-end;
}
.wrapper is your parent-container, which flexes from top to bottom (column).
Inside are the two div's for text and image, which align themselves to the top (flex-start) and bottom (flex-end).
Have a look at the link if you get stuck - it's pretty well documented I think! Good luck.
Hope this may help you,
Using flex is considered to be best practice. The table and table-cell are the old ways as we have came way far and new properties are being invented day by day. As using the flex will adjust the content itself as you resize the browser and has its own qualities.
#product-landing .landing-row {
display: flex;
flex-direction: row;
}
.product-landing,
.product-landing-2,
.product-landing-3 {
margin-right: 2.0533%;
}
.product-landing,
.product-landing-2,
.product-landing-3,
.product-landing-4 {
flex: 1;
text-align: center;
}
#product-landing p {
margin-top: 0px;
margin-bottom: 5px;
clear: both;
width: 100%;
}
.product-landing .land-image {
vertical-align: bottom;
}
.product-landing img,
.product-landing-2 img,
.product-landing-3 img,
.product-landing-4 img {
margin-top: 10px;
display: block;
max-width: 350px;
margin: 0 auto;
bottom: 0px;
width: 100%;
}
<div id="product-landing">
<div class="landing-row">
<div class="product-landing">
<div id="product-text">
<div id="offer-title">Product1</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image1.jpg">
</p>
</div>
<div class="product-landing-2">
<div id="product-text">
<div id="offer-title">Product2</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image2.jpg">
</p>
</div>
<div class="product-landing-3">
<div id="product-text">
<div id="offer-title">Product3</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image3.jpg">
</p>
</div>
<div class="product-landing-4">
<div id="product-text">
<div id="offer-title">Product4</div>
<p>
</p>
<p><b><i>Product description</i></b></p>
</div>
<p class="land-image">
<img src="http://image4.jpg">
</p>
</div>
</div>
</div>
Issue: So vertical alignment issue is I have two divs in the last column and I'm trying to get one to stay at top and one to stay at the bottom regardless of how the central column grows. I can work this out by using fixed heights but that's no good in this case.
Here is my code example : JS Fiddle
HTML:
<div class="row" class="property-bundle"><!-- (x) number of these -->
<div class="col-xs-11 wrapper">
<div class="row">
<div class="col-xs-2 pull-left vendor">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-xs-8 properties-list">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 1</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 2</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 3</p></div>
</div>
</div>
<div class="col-xs-2 costs"><!-- costs column -->
<div class="row total">
<h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top-->
</div>
<div class="row" class="fees"> <!--stay at bottom-->
<div class="col-xs-12">
<hr/>
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.wrapper {border: 1px solid black; padding: 10px; margin: 15px;}
.vendor {min-width: 120px;}
.properties-list {background-color: aquamarine}
.costs {vertical-align: top; min-width: 150px; vertical-align: center}
.fees {vertical-align: bottom; }
h3 {font-weight: 400}
h4 {color: green}
.total { margin-right: 0px; }
Hi you can try using flexbox
I just change your html like this:
<div class="col-xs-2 costs">
<!--stay at top-->
<div class="total">
<h3 class="text-right">TOTAL: £1,2M</h3>
</div>
<hr/>
<div class="materials">
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
Then I add on costs div display:flex;and on total div flex-grow: 1 This flex-grow will push materials on bottom of div.
You just need to add on body, html, row and costs div height:100%
Here is css:
.costs {
vertical-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.total {
flex-grow: 1;
}
You can see example on this link: https://jsfiddle.net/3L5Lbwhn/9/
Ok I simplified this a bit, but essentially flex did what I needed so many thanks to Edin Puzic for putting me on the right lines! It also allowed me to fix the 1st and last col width and make the middle one dynamic horiontally too.
JsFiddle
<div class="row-flex">
<div class="col-flex-1">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-flex-2">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 1</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 2</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 3</p>
</div>
</div>
</div>
<div class="col-flex-3">
<div class="pos-top">
<div class="row right-text">
TOP right
</div>
</div>
<div class="pos-bottom">
<div class="row right-text">
<p>
BOTTOM right
</p>
</div>
</div>
</div>
</div>
CSS
.row-flex {
height: auto;
display: flex;
flex-flow: row column;
}
.col-flex-1 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.col-flex-2 {
width: 80%;
border-left: 1px #ccc solid;
flex: 1 1;
}
.col-flex-3 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
background-color: lightgrey;
}
.pos-top {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-start;
align-items: flex-start;
background-color: yellow;
}
.pos-bottom {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-end;
align-items: flex-end;
background-color: green;
}
.right-text {
text-align: right;
width: 100%;
}
I have a problem with images displaying in different heights and text underneath not aligning.
this is the mark up, I have a six row containers to display 6 images
<div class="row">
<div class="posts">
<img src="images/bond.jpg" alt="quantum of solace">
<h3 class="title">Quantum of Solace</h3>
<p class="post-info">PG13 | 106min</p>
</div>
</div>
I am setting each post to 14% coz there are 6 of them allowing for 2.5% margin right. I tried to wrap image in a div and set that to overflow hidden, but didn't work.
.row {
width: 100%;
}
.posts {
width: 14%;
float: left;
margin-right: 2.5%;
}
.posts img {
width: 100%;
max-width: 100%;
border-radius: 0.5em;
}
If you can change the disposition of the nodes, you could align the text below the images using: display:table. See the next example:
.table {
display: table ;
}
.row {
display: table-row ;
}
.header, .title, .post-info {
display: table-cell ;
width: 14%;
padding: 0 1.25% 0.25% 1.25% ;
vertical-align: top ;
}
.header img {
max-width: 100%;
border-radius: 0.5em;
}
<div class="table">
<div class="row">
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/en/2/2d/Quantum_of_Solace_-_UK_cinema_poster.jpg" alt="quantum of solace">
</div>
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/en/6/66/E_t_the_extra_terrestrial_ver3.jpg" alt="E.T. the Extra-Terrestrial ">
</div>
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/en/a/a2/Star_Wars_The_Force_Awakens_Theatrical_Poster.jpg" alt="Star Wars VII">
</div>
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/en/8/8e/DisneyCheshireCat.jpg" alt="Alice in Wonderland">
</div>
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/en/6/6c/XFilesMoviePoster.jpg" alt="The X-Files">
</div>
<div class="header">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Poster_-_Gone_With_the_Wind_01.jpg/440px-Poster_-_Gone_With_the_Wind_01.jpg" alt="Gone with the Wind">
</div>
</div>
<div class="row">
<h4 class="title">Quantum of Solace</h4>
<h4 class="title">E.T. the Extra-Terrestrial </h4>
<h4 class="title">Star Wars: Episode VII The Force Awakens</h4>
<h4 class="title">Alice in Wonderland</h4>
<h4 class="title">The X-Files: Fight the Future</h4>
<h4 class="title">Gone with the Wind</h4>
</div>
<div class="row">
<p class="post-info">PG13 | 106min</p>
<p class="post-info">G | 115min</p>
<p class="post-info">PG13 | 136min</p>
<p class="post-info">G | 187min</p>
<p class="post-info">PG13 | 121min</p>
<p class="post-info">G | 238min</p>
</div>
</div>
I am working with an existing system, and am trying to modify the CSS in order to arrange the three columns correctly.
What css changes do I need to make in order to display the third column correctly?
View in this JSFiddle
CSS
.test .repeater {
border: none;
margin: 0;
}
.test .indent1 .wizard-parentcontrol .controlkl {
width: 33%;
float: left;
display: block;
}
.test .wizard-controls .indent1 .control:first-child {
margin-top: 17px;
}
.test .indent1 .wizard-parentcontrol .popupbrowser {
width: 30%;
float: left;
border: 1px solid red;
display: block;
}
HTML
<div class="test wizard-parentcontrol">
<div>
<div>
<fieldset></fieldset>
</div>
<div>
<div>
<fieldset>
<div>
<div class="repeater indent1">
<div class="wizard-parentcontrol">
<div>
<div>
<div class="controlkl">Column 1</div>
</div>
</div>
<div>
<div>
<fieldset>
<div id="p0t2c4dpopupbrowserControl" class="popupbrowser">Column 2</div>
</fieldset>
</div>
<div>
<div class="">
<p class="ctrlinvalidmessage"></p>
<fieldset>
<div id="p0t2c5dpopupbrowserControl" class="popupbrowser">Column 3</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
Check If you can do the following changes.
I just added class
.wizard-parentcontrol div
{
float:left;
}
and removed the hardcoded width's of 33% and 30% from your code.
Check the demo