Update: Thanks all for your kind comments. I have taken up isherwood's advice to use flexbox and pytth's comments on naming of id/ class.
Now, I have this but the height of the two flexboxes are not the same. What am I doing wrong? I have tried setting min-height, and height: 100% to no avail.
Here's my updated HTML:
<section class="featured movie">
<!--featured movie-->
<div class="container">
<div class="content-1">
<!--image-->
<img src="images/edge of tomorrow.jpg.png" alt="Edge of Tomorrow" href="featured.html" class="featured-banner">
</div>
<!--headings-->
<div class="content-2">
<h1>Edge of Tomorrow</h1>
<h2>Rating: 4/5</h2>
<h3>It leaves you on the edge, wishing for a tomorrow.</h3>
</div>
</div>
</section>
And my updated CSS:
#media(min-width:768px) {
.container {
display: flex; /*puts the 2 contents side by side*/
margin: auto;
justify-content: center;
width: 70%;
min-height: 100%;
padding-top: 20px;
}
}
.content-1 {
flex: 1 ;
min-height: 0%;
height: 100%;
}
.content-2 {
background-color: grey;
flex: 1;
}
Would appreciate any advice/ suggestions. Thank you in advance :)
What isherwood has said but with some context. Try stay away from id's unless you want to specifically target something. Otherwise Class is better. In terms of rows and columns, unless you are using a front end framework like bootstrap, your better off just using your own stuff.
Have a look into display flex, its quite an indepth thing and works for most situations
<section class="featured-movie">
<!--featured movie-->
<!--image-->
<div class="featured-image">
<img src="https://via.placeholder.com/150x150" alt="Edge of Tomorrow" href="featured.html" class="featured-banner">
</div>
<!--headings-->
<div class="featured-content">
<h1>Edge of Tomorrow</h1>
<h2>Rating: 4/5</h2>
<h3>It leaves you on the edge, wishing for a tomorrow.</h3>
</div>
</section>
/*==FEATURED SECTION===*/
/*Align featured movie & texts to middle of page*/
.featured-movie {
width: 70%; /*so that there is 15% space left and right*/
margin-left: 15%;
margin-right: 15%;
padding-top: 20px;
display: flex;
}
/*====FEATURED IMAGE===*/
.featured-banner {
min-width: 320px;
width: 70%; /*banner to occupy 70% of space within the 70%*/
float: left;
}
/*featured section for text*/
.featured-content {
display: inline-block;
text-align: center;
width: 30%;
background-color: grey;
}
Update to all:
After researching more I have used a grid CSS layout which works perfectly. Thanks all for your kind comments and guidance! :-)
Related
My top div acts as a logo and has a title. I would like a logout button to be on the right-hand side of the div and text above also right-aligned.
I left out the button/ link as i did not know where to place it.
I'm looking for something like this:
My goal is a logo and, on the right, the logout button with text on the top.
How can I achieve that?
.logo {
overflow: hidden;
text-align: left;
position: relative;
margin: 0px 100px;
height: 60px;
background-color: pink;
color: blue;
font-family: Arial;
}
<div class="logo">
<h1>LOGO</h1>
</div>
You can use flexbox here. Try this out:
.wrap {
display: flex;
justify-content: space-between;
}
.logo {
overflow: hidden;
text-align: left;
position: relative;
height: 60px;
background-color: white;
color: #1F6C8B;
font-family: Arial;
}
<div class='wrap'>
<div class="logo">
<h1>LOGO</h1>
</div>
<div>
<p>abcdefg</p>
<button>Click It</button>
</div>
</div>
jsfiddle: https://jsfiddle.net/dm198kpx/2/
There are various ways to achieve what you want. I believe the simplest one is with Flexbox:
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
<div class="flex justify-between">
LOGO
<div>
BLABLABLA<br>
<button>Logout</button>
</div>
</div>
Here, flex is a display property that is usually used in container-type elements (like div). It helps to align content. It allows the use of various other properties like justify-content, align-items* and others. In this case, we are using only justify-content, which align direct children on the main axis (the horizontal one by default), with the space-between value, which distributes the content as far as possible - and since we have only two direct children of <div class="flex justify-between">, LOGO and <div>, put the first on the far left and the last on the far right.
*: you can learn more about Flexbox properties and use cases in this game: https://flexboxfroggy.com/
I've added the button to what I think is your header? I used the native header tag, but if it isn't your header, you can always replace this with a div with a unique id of your choice. I included position:fixed; in the css, otherwise the button wouldn't stay to the right (you could use float, but it can be problematic imho). Height/colour etc are adjustable of course.
Hope this helps
h1.logo {
display: inline-block;
position: relative;
text-align: left;
margin: 10px 100px;
height: 60px;
background-color: white;
color: #1F6C8B;
font-family: Arial;
}
#logout {
background-color: lightblue;
height: 30px;
text-align: right;
right: 40px;
position: fixed;
}
.logo,
#logout {
vertical-align: top;
}
<header>
<h1 class="logo">LOGO</h1>
<button id="logout">Logout</button>
</header>
EDIT: Just saw the text-above edit to your question. See fiddle
I am trying to learn how to make a responsive grid layout with images. I feel i am almost there but i am having a few issues with alignment. First of all to make things easier to understand I have made a mock-up of what i am trying to achieve:
(grid will be used to display images/posts. i want to be able to mix and match them.)
Screen-shot of what i have achieved so far:
but when i add a med-box to the grid i have alignment issues. as you can see here:
(the height of the MED-BOX is slightly taller than the SML-box and the SML-BOX does not align properly.)
I also have this problem when i add another 3 x SML-BOX under a column with a MED-BOX in it:
I thought it was something to do with the % width of my "med-box" (see code below) but i have tried adjusting the width percentage and cant get it to work! Another issue I am having is when i go into mobile width, the margin on the left is off and i am not sure why. Please check out my code below or on JsFiddle: https://jsfiddle.net/shiggydoodah/z0og70wn/
I have been stuck on this for awhile now and i really need to some expert advice. If anyone knows how to fix this it would be greatly appreciated if could share it with me.
Many Thanks
Louis
section {
width: 80%;
margin: 20px auto;
line-height: 1.5em;
font-size: 0.9em;
padding: 30px;
color: black;
border: 4px solid red;
overflow: hidden;
}
.row {
margin: 0 auto;
width: 100%;
}
.col {
min-height: 40px;
margin-left: 1%;
margin-right: 1%;
margin: top 1%;
margin-bottom: 1%;
display: inline-block;
float: left;
}
.col:first-child {
margin-left: 0px !important;
}
.col:last-child {
margin-right: 0px !important;
}
.img-responsive {
max-width: 100%;
height: auto;
display: block;
padding: 0;
}
.col.lrg {
width: 100%;
}
.col.sml {
width: 32%;
}
.col.med {
width: 65%;
padding: 0;
}
#media (max-width: 766px) {
col {
width: 90% !important;
margin: 10px auto !important;
padding: 0;
}
.col.lrg {
width: 100%;
height: auto;
}
.col.sml {
width: 100%;
height: auto;
}
.col.med {
width: 100%;
height: auto;
}
}
<section>
<div class="row">
<div class="col lrg">
<img class="img-responsive img-lrg" src="http://i.imgur.com/9nN5kU8.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col med">
<img class="img-responsive" src="http://i.imgur.com/GBKW5ri.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
</section>
First of all there are a few issues with how you are using your grid. Whenever you float an element you essentially remove said element from the document flow. This means subsequent elements will not know how to position themselves in the natural flow of things. You need to ensure you use a clear in order to negate the effects of a float.
In additional the medium element needs to be set to 66% width to account for the margin on the left and right of your small column class. Please see edited fiddle
CSS:
.col.med {
width: 66%;
padding: 0;
}
I have also added a clear to your row class:
.row::after {
content: "";
display: table;
clear: both;
}
I have also removed the use of the !important statement you've implemented. This is a very bad practice to adopt as if you are using inheritance correctly and the natural cascading nature of CSS then you will not need to explicitly try to override anything using this method.
This issue is due to the proportions of your MED-BOX image.
You should crop it a little bit with some modifications on your .row css properties.
.row {
margin: 0 auto 15px;
width: 100%;
max-height: 455px;
overflow: hidden;
}
I equally add a bottom margin per row as the overflow hidden behavior cause the .col bottom margin property to be hidden by the row overflow.
You have to clear each row when you have floating elements inside of it and overflow: hidden so that it could fill the height.
.row
{
clear:both;
overflow: hidden;
}
Is it possible, with CSS, while using a row with two column, one with an image and another with text, to have their content vertically aligned in the middle?
I've been banging my head for days over this and tried everything I could possibly think of.
This is the basic structure that I'm using which is entirely based on percentages. This is for a responsive one-page layout based on a series of sections, each with min-height set to 100%.
CSS
html, body {
width: 100%;
height: 100%;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table-cell;
}
.col-left, .col-right {
float: left;
width: 50%;
height: 100%;
}
/*--this should be vertically centred--*/
.content {
}
HTML
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>SOME TEXT</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="SOME IMAGE URL">
</div>
</div>
</div>
</section>
JSFiddle
.row {
...
display:table-row;
}
.col-left, .col-right {
...
display: table-cell;
vertical-align: middle;
}
Demo
You were 95% of the way there as you laid out the structure using display:table, and display:table-cell, but you floated what should have been display:table-cell, and set table-cell on what should have been table row. Use this instead:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table-row;
}
.col-left, .col-right {
display:table-cell;
width: 50%;
height: 100%;
vertical-align:middle;
}
.col-left {
background: MidnightBlue
}
.col-right {
background: ForestGreen;
text-align: center;
}
.content {
border: 1px dashed red;
}
h1 {
font-family: sans-serif;
color: white;
}
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
</div>
</div>
</div>
</section>
you can try this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
min-height: 100%;
display:table;
height:inherit;
}
.row {
width: 100%;
height: 100%;
display:table;
}
.col-left, .col-right {
float: left;
display:table;
vertical-align:middle;
width: 50%;
height: 100%;
}
.col-left {
background: MidnightBlue
}
.col-right {
background: ForestGreen;
text-align: center;
}
.content {
display:table-cell;
vertical-align:middle;
height:100%;
border: 1px dashed red;
}
h1 {
font-family: sans-serif;
color: white;
}
<section>
<div class="row">
<div class="col-left">
<div class="content">
<h1>I should be vertically aligned in the middle...<br><br>And so should the image on the right...
</h1>
</div>
</div>
<div class="col-right">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png">
</div>
</div>
</div>
</section>
For anyone interested in this topic, this issue and the answers provided raised in me another question regarding which method to apply in this situation, and in fact, for building columns in general: Floating or Display property. For any newbie or self-taught wannabe developer like my self may be interesting to know what I've concluded after research and testing.
I find my self often using different methods for building columns that revolve around Floating the elements and in one way or another always require some hacking in the end to do exactly what I want, leaving me with a feeling of inconsistency and unreliability.
One would think that something so vital for layout structure would have at this point in time some obvious, elegant and simple solution. Apparently it has, and it's called Display Table. It might have limitations in some very specific situations but in general it's all you need. It's rock solid and you can pretty much do anything you want with it. Unfortunately, I think the word "table" is still a kind of taboo. This method however is simple, comprehensible, reliable and doesn't require any hacks to behave as expected. Vertical alignment which is always a struggle is also made easy this way.
A simple structure like this is all you need:
.container {
display: table;
}
.row {
display: table-row;
}
.col {
display: table-cell;
}
For some reason (probably because of the nasty word "table"), you wont be able to find this method suggested anywhere with a simple search on basic css columns.
I thought this articles on the subject were interesting:
Give Floats the Flick in CSS Layouts
Farewell Floats: The Future of CSS Layout
I've tried everything and looked at many relevant discussions on here but nothing has helped. I'm designing it through Dreamweaver and when I look at the design in D.W all 3 divs are in a row but in the ie browser the divs are in a column.
HTML
div class="container">
<div id="news" class="fluid">
<div align="center">News</div>
<div align="center">VOLUNTEERS THE HEART OF THE COMMUNITY<br>
Volunteers wanted in our three charity shops in Worthing. Read more..</div>
</div>
</div>
<div id="events" class="fluid">
<div align="center">"events"</div> </div>
<div id="newsletter" class="fluid">
<div align="center"></div>
</div>
</div>
CSS
.container {
width: 100%;
margin: 0 auto;
display: block;
text-align: center;
clear: none;
}
#news {
width: 32.2033%;
clear:none;
background-color: rgba(232,138,12,0.57);
}
#events {
clear:none;
display: inline-block;
margin: 0 auto;
width: 33.7288%;
background-color: rgba(20,18,241,1.57);
}
#newsletter {
background-color: rgba(16,203,225,1.57);
width: 20.2033%;
clear:none;
}
The url is http://www.worthingscope.org.uk/newindex.html
Any help would be great
Many thanks.
First, remove clear: none; wherever you have it; it's not doing anything useful. Second, as user j08691 mentioned, there are more than three divs here, so it's not 100% clear which ones you want aligned horizontally. I will assume it's the ones with .fluid as a class, however. So you can do something like this:
.fluid {
float: left;
}
JSFiddle Example
I've been having an enormous amount of trouble for what I thought would be easy, but it's turning out to be much more difficult than I had anticipated.
I have an image alt="home" that I want to center in my footer, with text underneath it, but margin-left and margin-right: auto don't work, margin: 0 auto doesn't work either. Are there other options to center something?
And for the address, it's being pushed down because the width of the copyright and "home" img have a width the size of the footer. When I try to apply a width percentage to the div containing the home img and the copyright text, it disappears for some reason?
This is the result I want to achieve: http://i.imgur.com/khjrZow.jpg
jsfiddle (with complete html and css): http://jsfiddle.net/A2H3n/
If anyone knows what's going on, and can let me know, that would make me so happy... but really, I've spent 4 hours trying to fix this(I've just started learning CSS). Any help would be appreciated!
Relevant HTML:
<footer>
<div id="sociallinks">
<img class="sociallogo" src="images/facebooklogo.jpg" alt="Facebook">
<img class="sociallogo" src="images/Twitterlogo.jpg" alt="Twitter">
</div>
<div id="logoandtext">
<img id="footerlogo" src="images/blackbeltinverse.png" alt="home">
<p>© Hsien-Jin Martial Arts Studio<p>
</div>
<div id="contactinfo">
<p>7548 Mahogany Rd</p>
<p>Los Angeles, CA 97789</p>
<p>(444) 123-4567 </p>
</div>
</footer>
Relevant CSS:
footer{
overflow: hidden;
display: block;
margin: 0 auto;
color: #FFFFFF;
}
#sociallinks{
float: left;
margin: 0;
display: block;
width: 20%;
height: 100%;
}
.sociallogo{
width: 3em;
height: 3em;
}
#footerlogo {
width: 4em;
height: 4em;
margin: 0 auto;
}
#contactinfo {
line-height: 1.25em;
text-align: right;
}
display:inline-block; may be the answer:
footer{
text-align:center;
}
#sociallinks, #logoandtext, #contactinfo{
display:inline-block;
}
#contactinfo{
float:right;
}
Fiddle : http://jsfiddle.net/bonatoc/PLbae/1/
CSS overwrites are at the very bottom.
You can do it like this
Move the #contactinfo div above the #logoandtext
HTML
<div id="sociallinks">/*Some thing here*/</div>
<div id="contactinfo">/*Some thing here*/</div>
<div id="logoandtext">/*Some thing here*/</div>
CSS
#logoandtext {
margin: 0 140px;
text-align: center;
}
#contactinfo {
float: right
}