On the following [website][1] I have a banner section which I have told to display as display table with table cells. I used this because I needed to align the image to the middle of the banner.
HTML:
<div class="banner banner-large">
<div class="banner-inner">
<div class="banner-col col-page-intro">
<h1>Collect. <br>Transport. <br>Recycle.</h1>
</div>
<div class="banner-col col-banner-image">
<img src="/files/1813/9705/0946/gd-hero.png" alt="">
</div>
</div>
</div>
SCSS:
.banner {
background:$red;
color:$white;
position:relative;
overflow: hidden;
}
.banner-inner {
display:table;
width:100%;
height:100%;
#include bp(XS) {
display:block;
}
}
.banner-col {
display:table-cell;
width:50%;
#include bp(XS) {
display:block;
width:100%;
}
}
.col-page-intro {
padding:40px 0 40px 60px;
vertical-align: top;
#include bp(L) {
padding:20px 0 20px 30px;
}
#include bp(XS) {
width:100%;
padding:20px 15px;
}
}
.col-banner-image {
text-align:center;
padding: 0 30px;
vertical-align: middle;
#include bp(XS) {
text-align:left;
margin-bottom:20px;
padding:0 10px;
}
}
If you [compare the website][2] in both chrome and firefox you'll notice chrome honours the width and resizing of the image (max-width 100%) whereas firefox does not.
What can I do to make both browsers behave as Chrome is currently?
edit: this only works in chrome.
Just add width: 100%; and probably display: block; to your img:
.col-banner-image img {
display: block;
width: 100%;
}
Related
I'm trying to get the right column of a 3 column layout to move below the left column on smaller screens. Right now the right column moves in the correct direction except that it hangs below the middle column.
I created this basic simulation of my issue. Note the middle column will always be longer than the left and right columns as shown here.
<style>
.container {
max-width:1280px;
width:100%;
height:200px;
margin-left:auto;
margin-right:auto;
display:flex;
flex-wrap: wrap;
}
.leftsidebar {
width:20%;
height:200px;
background-color:gray;
margin-top:15px;
}
.middle {
width:57%;
background-color:blue;
margin-left:15px;
margin-right:15px;
height:800px;
margin-top:15px;
}
.rightsidebar {
width:20%;
background-color:orange;
height:200px;
margin-top:15px;
}
</style>
<div class="container">
<div class="leftsidebar">left</div>
<div class="middle">middle</div>
<div class="rightsidebar">right</div>
</div>
You can't accomplish that with Flexbox, unless setting fixed height's all over.
Here is a solution that combine Flexbox with float, and use a media query to swap between the two, when on narrower screens.
Note, when using percent based width combined with fixed margins, it can at some point cause the item to wrap. Use CSS Calc to avoid that, as showed in the answer.
Stack snippet
.container {
max-width: 1280px;
height: 200px;
margin: 0 auto;
display: flex;
}
.leftsidebar, .rightsidebar {
width: 20%;
background-color: gray;
margin-top: 15px;
}
.rightsidebar {
background-color: orange;
clear: left;
}
.middle {
width: calc(60% - 30px); /* calc for margin */
background-color: blue;
margin: 15px 15px 0 15px;
height: 800px;
}
#media (max-width: 600px) {
.container {
display: block;
}
.leftsidebar, .rightsidebar {
height: 200px;
float: left;
}
.middle {
width: calc(80% - 30px); /* calc for margin */
float: right;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
I could come up only with old good floats, no flexboxes at all. If you don't have to use flexboxes and you are interested, with pretty light hustle it might look like this (snap point is 700px):
* {
box-sizing: border-box;
}
.container {
width:90%;
height:200px;
margin:0px auto;
}
div > div {
background-color: orange;
float: left;
color: white;
text-align: center;
padding: 1em;
}
.leftsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
.middle{
width:56%;
margin: 15px 2% 0%;
height:415px;
}
.rightsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
#media (max-width: 700px) {
div > div:nth-of-type(2n + 1) {
width: 33%;
}
div > div:nth-of-type(2n) {
float: right;
width: 65%;
margin-right: 0%;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
I am somewhat new to CSS and thought I was trying to do something simple.
I am creating a responsive page. My goal is to accomplish the following:
Anything smaller than 768px - center each div horizontally. That is happening just fine.
Between 768px and 1024px, Center the main container on the page, with the two divs side by side main container div. Everything is currently not centering.
1024px wide and above - image div on left, text on right - flush to edge of nav.
I am getting super wonky behavior here.
I am fairly certain that I have missed something fairly obvious since I am very new to this and have jumped headfirst into making something I thought was simple. I have been looking at this for quite some time. Could someone attempt to explain this to me for this scenario? Am I nullifying something by declaring referencing code it in my media queries (I did notice I had an issue since I declared mismatched properties at an earlier time)?
<body>
<header>
<img class="style-logo" src="Prism_images/RuckerLogo.png" alt="Logo">
<nav class="style-nav">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="Content">
<div class ="style-img">
<img src="Prism_images/Miles---Headshot_200.png">
</div>
<div class="style-main" id="Text">
<p>premire cabinetmaker</p>
</div>
</div>
<footer></footer>
</body>
And here is the CSS:
header {
padding: 20px;
}
.style-logo {
margin-left: auto;
margin-right: auto;
display: block;
background-color: antiquewhite;
}
.style-nav ul {
list-style-type: none;
display: block;
padding: 0px;
}
.style-nav ul li a {
text-decoration: none;
color: #414040;
text-align: center;
display: block;
text-transform:uppercase;
padding: 2px;
}
.style-img {
margin-left:auto;
margin-right:auto;
width: 200px;
}
.style-main {
margin-left:auto;
margin-right:auto;
width: 450px;
}
.style-main p {
color: slategrey;
text-align:left;
margin-top:0px;
margin-left:10px;
display:block;
}
#Content{
margin-left:auto;
margin-right:auto;
}
/*Tablet View*/
#media (min-width: 768px){
body {
max-width: 778px;
}
.style-logo {
float: center;
}
.style-nav ul li {
display: inline-block;
}
.style-nav ul {
text-align: center;
}
.style-img{
margin-top:0px;
width:200px;
display:inline-block;
}
.style-main {
margin-top:0px;
display:inline-block;
}
#Content {
margin-left:auto;
margin-right:auto;
display:block;
}
}
#media (min-width: 1024px){
body {
max-width: 1100px;
}
.style-logo {
float: left;
}
.style-nav {
float: right;
}
.style-img {
margin-top: 40px;
float:right;
display:inline-block;
}
.style-main {
padding:20px;
display: inline-block;
}
}
This is how to center everything ^^
div {
display: table;
margin: 0 auto;
}
<div>I'm centered<div>
That or this.
div {
display:block;
margin:0 auto;
}
I have the following HTML:
<div class="col span_1_of_3 setCenter">
<div id="divEachImageExt">
<div id="divEachImage">
<div id="slides">
<div class="inta"><img src="theImages/imcpsite.png" width="140" height="140" alt="side" /></div>
</div>
<div id="menu">
<ul class="ulText">
<li class="menuItem act">PS: BASICS</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.col {
/*display: block;*/
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
.span_1_of_3 {
width: 32.2%;
}
.setCenter {
text-align: center;
}
#divEachImageExt {
float: left;
width: 30%;
margin: 0 auto;
}
#divEachImage {
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url('../theImages/panel.jpg') repeat-x bottom center #FFFFFF;
/* The width of the divEachImage */
width:175px;
overflow:hidden;
margin: 0 auto;
}
#slides {
/* This is the slide area */
height:155px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:175px;
overflow:hidden;
margin: 0 auto;
}
.inta {
float:left;
width: 175px;
margin: 0 auto;
height: 140px;
padding-top: 8px;
}
#menu {
/* This is the container for the thumbnails */
height:45px;
}
ul.ulText {
margin:0px;
padding:0px;
}
ul.ulText li {
/* Every thumbnail is a li element */
width:125px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
line-height: 45px;
vertical-align: middle;
}
li.inact:hover {
/* The inactive state, highlighted on mouse over */
background:url('../theImages/pic_bg.png') repeat;
}
li.act a {
cursor:default;
}
ul.ulText li a {
display:block;
background:url('../theImages/divider.png') no-repeat right;
height:35px;
padding-top:10px;
}
What happens is, the inner DIV is left aligned instead of being centered.
Here is a F12 Dev Tool screenshot:
Add display: inline-block to an element you want to be centered.
Heres the fiddle for you: http://jsfiddle.net/u26wqssb/
And heres the code:
Sample HTML:
<div class="setCenter">
<div class="centerMe"></div>
</div>
and CSS:
.setCenter {
width:100%;
text-align:center;
background: #eee;
}
.centerMe {
width:100px;
height:100px;
background:red;
display:inline-block;
}
If you add a fiddle for your case we can fix it there.
Hey You can Try using the margin to center it like so
.yourstyle {
margin:0 auto; /* shorthand or margin-left:auto; margin-right:auto; for long way */
}
or you could attempt to use CSS3 2D transforms to center it or just Flex box good luck
Is there any reason for the float in #divEachImageExt? If no the either
/* .setCenter part not needed */
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
or
.setCenter {
text-align: center;
}
#divEachImageExt {
display: inline-block;
width: 30%;
}
will do.
change #divEachImageExt to below code
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
remove float:left
It will solve your problem.
I've been trying to find a solution to this for days, but haven't found anything that works.
I thought I'd finally make an account on this great website, so here goes:
I am trying to have a div expand from left to right, with 170px of clearance on both sides.
However, when there is no content on the page, or only a few words, the div doesn't expand.
I've tried to add width: 100% in several different divs to try and have them take up the full space, but that either does nothing, or completely busts the page layout. for example, instead of filling out the page, the div that's supposed to hold the content moves off the right side of the screen, and also doesn't leave the 170px margin.
I hope you can be of help, my code is posted below:
Thanks in advance,
Chris
the html:
<html>
<body>
<div id="wrapper">
<div id="pagetopwrap">
</div>
<div id="pagemainliquid">
<div id="pagemainwrap">
<div id="content">
<div id="headerwrap">
<div id="header_left">
</div>
<div id="header_main">
<div id="logo_row">
<p id="logotext">Site Title</p>
</div>
<div id="menu_row">
<!-- irrelevant menu button code -->
</div>
</div>
<div id="header_right">
</div>
</div>
<div id="contentbody">
<div id="contenttext">
<p id="contenttextmakeup">Lorum Ipsum Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
</div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
the css:
It is not ordered too well, the uninteresting sides, top and footer are first, and the main part of the website at the bottom
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #0f0f0f; /* is normally an image */
}
#wrapper {
width: 100%;
min-width: 960px;
max-width: 1920px;
margin: 0 auto;
height: 100%
}
#pagetopwrap {
height: 50px;
width: 100%;
float: left;
margin: 0 auto;
}
#pagemainliquid {
float: left;
}
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
}
#leftcolumnwrap {
width: 170px;
margin-left:-100%;
float: left;
}
#leftcolumn {
margin: 5px;
}
#rightcolumnwrap {
width: 170px;
margin-left: -150px;
float: left;
}
#rightcolumn {
margin: 5px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
bottom:50px;
}
#footer {
height: 0px;
margin: 5px;
}
#headerwrap {
width: 100%;
margin: 0 auto;
}
#header_left {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
float:left;
}
#header_right {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
margin-left: 0px;
float:right;
position:relative; top:-200px;
}
#header_main {
background-color: #00ff00; /* is normally an image */
margin-left: 25px;
margin-right: 25px;
height:200px;
background-size: 100% 200px;
}
#contentbody {
background-color: #E2E2E2;
border-radius: 10px;
margin-top:10px;
border: 1px solid #A7A7B2;
}
#contenttext {
margin-left:10px;
margin-right:10px;
}
#logo_row {
height:150px;
width:100%;
float:left;
}
#logotext {
margin-top:20px;
margin-left:10px;
vertical-align: middle;
font-size: 55px;
font-family: "Arial Black", Arial;
}
#contenttextmakeup {
margin-top:12px;
margin-left:10px;
vertical-align: middle;
}
#menu_row {
width:100%;
}
button.menubutton {
/* irrelevant button markup */
}
http://jsfiddle.net/w9qLh6tp/ if that helps, I've seen it a lot around here :)
Instead of using !important, save yourself a headache in figuring out why important works.
CSS = cascading style sheets. You have a selector with more specificity which is why your width property isnt changing. Figuring out the route of the problem will save you time in the future when this happens again (and it will)
For example, if I styled something like so
#container .red { width: 50% }
updating the style using .red without the #container in front of it has less specificity. So if they are both modifying the same property, the one with more prevalence will take effect. This is true for media queries as well.
Fixed here http://jsfiddle.net/w9qLh6tp/1/
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
width: 100% !important; // set it highest priority
border: 3px red solid; // border is set just for demonstration
}
set the width to be 100% with priority (!important) that will override any other css styling.
I have a navigation inside which I have two divs, one for the logo and the other for menu. Logo div was floated to left. So, it's parent's height is now the same as the logo div. But, the floated menu div sits at the top. I want to align it in the middle. How can I do the same? Please help me...
My code is given below...
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div class="navigation clearfix">
<div class="logo">
<img src="logo.png" />
</div>
<div class="navigation-menu">
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
</div>
</div>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
}
.logo {
float:left;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.navigation-menu {
float:right;
background-color:red;
}
And, here's the fiddle...
http://jsfiddle.net/ZghVk/
Without defining a fixed height, you can change your layout to use display:table to facilitate easier vertical alignment.
Try changing your CSS to:
Demo Fiddle
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
display:table;
width:100%;
}
.logo {
display:table-cell;
}
.navigation-menu {
text-align:left;
display:table-cell;
text-align:right;
vertical-align:middle;
}
.navigation-menu a{
background-color:red;
float:right;
padding:0 5px;
}
You can set the line-height:
JSFiddle
.navigation-menu {
float:right;
background-color:red;
line-height:120px;
}
This is what you have to do
.navigation-menu {
border:1px solid black;
background-color:red;
margin-left:40px;
}
.navigation-menu a{
margin-left:20px;
}
you are trying to ".navigation-menu" you should use for "a" anchor tag
Try this:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
display:table;
width:100%;
}
.logo {
display:table-cell;
}
.navigation-menu {
text-align:left;
display:table-cell;
text-align:right;
vertical-align:middle;
}
.navigation-menu a{
background-color:red;
float:right;
padding:0 5px;
}
Hope it helps! :)