The site in question is:
http://www.thewaterqualitysolution.com/
the css code I'm using for the columns is:
.column1,
.column2,
.column3,
.column4
{
column-rule-width: medium;
width: 282px;
max-width: 24%;
}
.column1,
.column2,
.column3
{
float: left;
margin-right: 24px;
max-width: 24%;
}
.column4
{
float: right;
max-width: 24%;
}
Why won't they stay in bounds?
Looking at the site you have declared a CSS rule for the columns twice. Your second declaration overwrites the first. Forcing all columns to a width of 282px. See default.css, line 510.
Also I recommend you read this post for a better understanding of CSS width and max-width.
CSS: Width and Max-Width
Related
Today I try to learn html and css. but when i try to make a 2 column layout in the body, i have a problem that i can't divide it into 2 parts even though i have given this code previously in the css section
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
width: 25%;
float: left;
}
when I debug this html what happens is that the right column stays under the left, but doesn't move to the top on the right
I'm confused why something like this can happen even though I have given the width value to each column before
if you know the solution please help me
You can add more css :
.leftcolumn {
float: left;
width: 75%;
height: 50px;
background-color: #ccc;
}
.rightcolumn {
width: 25%;
float: left;
background-color: #ff9600;
height: 50px;
}
exaple here: https://codepen.io/phm-tun-v/pen/rNJojbZ
I'm trying to work on a images section, in which they are being rendered from the servers. There are some images which are having different heights. Because of this, I'm unable to align the images in a manner.
NOTE - I have aligned the images, using display:inline but currently not able to solve height problem.
Current condition :
What I'm trying to follow is similar to Google :
img.res-img {
max-width: 350px;
max-height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
.image-result {
padding-left: 80px;
display: inline;
}
<div class="image-result" *ngIf="Display('images')">
<div *ngFor="let item of items$|async">
<img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
</div>
</div>
It would be great, if someone can help me out with this. Thanks!
UDPATE 1 - What I did from suggestions is this -
img.res-image {
float: left;
position: relative;
width: 20%;
}
This is how it looks now, still height problem is not being able to solve!
UPDATE 2 - After going through answer, this solution seems to be working. But, the resolution of the images has been decreased and aspect ratio is not proper.
img.res-img {
width: 350px;
height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
I have removed max-width and max-height and used width and height
This is how it looks now :
Remove max-width & max-height property and add just width & height property in your css
img.res-img {
width: 350px;
height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
.image-result {
padding-left: 80px;
display: inline;
}
You need to set one thing alone, i.e. either the height or the width to keep its aspect ratio same.
In your case you need height to be same on all images so you just need to remove the max-width property like this:
img.res-img {
/*max-width: 350px;*/
max-height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
You can also refer to thee fiddle I just created: https://jsfiddle.net/387bnaer/
I am working on a responsive website, and am having problems with Media Queries.
I have 2 div's, side by side set at 50% width, with float: left and float: right assigned to them respectively. On resize, I wish to remove these floats and display the divs width at 100%.
This is not working however.
Here's my code;
#media only screen and (max-width: 700px) {
#block-half-left, #block-half-right {
float: none;
width: 100%;
}
}
#block-full {
width: 100%;
height: 200px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
}
#block-half-left {
width: 50%;
height: 200px;
background-color: gray;
float: left;
}
#block-half-right {
width: 50%;
height: 200px;
background-color: green;
float: right;
}
The problem is not in the code itself, but its order of appearance.
First of all: You should avoid using !important to fix problems like this, since it is usually just a matter of being more specific on where the styling points.
In this case, however your Media Query is stated first, and after that you're stating the "other" part. CSS (like most languages) is read from top to bottom. If you just move your Media Query to the bottom of your CSS, your problem should be solved.
Specificity is important in CSS.
The simplest way to increase the specificity of your non-floating blocks are to move the rules to the bottom.
E.g:
#block-half-left {
width: 50%;
height: 200px;
background-color: gray;
float: left;
}
#block-half-right {
width: 50%;
height: 200px;
background-color: green;
float: right;
}
#media only screen and (max-width: 700px) {
#block-half-left, #block-half-right {
float: none;
width: 100%;
}
}
More on specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
Furthermore, you'll have a much easier time dealing with specificity in CSS if you use classes, rather than IDs. I.e. .block rather than #block.
when the screen size changes to less than 992px , i want the center div to come first and occupy 100% of the width whereas the left and right column should come right below it and share 45% 45% width on the same line, i want to use this for tablets, but when i try to reposition them, i manage to push the center up first but the right div falls below the left div leaving a large space to the right.
instead of
....center....
.left..right.. i get
....center....
left..........
right.........
below is the complete css & html for the divs
<section class="cbs-center-container">
<div class="column-type-1"> (left column)
</div>
<div class="cbs-content-col"> (center content)
</div>
<div class="column-type-1"> (right column)
</div>
</section>
.cbs-center-container (container)
{
padding: 30px 30px 13px 30px;
background:#eeeeee;
}
#cbs-content-col, (center div)
{
float: left;
min-height: 1px;
}
#cbs-content-col {
width: 50%;
padding: 5px 10px 60px;
}
.column-type-0{
float: left;
}
.column-type-0{
width: 25%;
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
}
#media only screen and (max-width: 992px) {
.cbs-center-container {
display:table; (first i display container as table)
}
#cbs-content-col{
display: table-header-group; (this is the div i want to show first)
width: 100%
}
.column-type-0 {
width: 45%;
display: table-footer-group; (this 2 columns should come second )
position: relative;
height: auto;
padding-right: 5px;
padding-left: 5px;
}
}
#media (max-width: 640px){ (mobile display)
.column-type-0{ width: 80%;
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
margin: auto;
}
}
please help , how do i re position dom elements with ease,
its best a solution without flexbox, didnt the community think about this,
i just realised i need it now since i got into responsive web design and if i may ask isn't and average tablet screen size around 1000px ?
Most of the time you dont need to use custom css for the positioning, you just add the float to the styling.
div div_name {
float: left;
/* remaining code goes here...........*/
}
check out this static tempalte from https://github.com/kybernetyk/medstime/tree/master/src/medstime/static
the page that I'm having trouble with is
https://github.com/kybernetyk/medstime/blob/master/src/medstime/static/plans-pricing.html
Inside the <aside> tag, when you try to increase the number of items, the <div class="grid">
stays fixed in height and size!
I've literally tried everything from setting height on it but it is impossible to grow the container as I add more content inside it.
I apologize in advance if you have already tried this. But I looked in the CSS code under saas-common.css and found this:
.grid aside {
width: 125px;
float: left;
padding-top: 110px;
text-align: right;
}
.grid aside li {
line-height: 51px;
font-size: 14px;
}
.grid .sections {
width: 782px;
height: 511px;
background: url(../images/bg-grid-box.png) no-repeat left top;
float: right;
}
.grid section {
float: left;
text-align: center;
height: 509px;
}
Looks like there are some fixed heights under the grid div. You could try overriding with !important.
A few things to try from there:
min-height: 500px;
height:auto;
Then,
overflow:hidden;
And if all else fails,
position:absolute;