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
Related
I'm creating a menu bar on my website. My issue is that there is a small margin at the side of one of my menu items. (I have highlighted this by adding background-color: black; to the container.) I am using safari.
The CSS:
.testMenuOption{
width: calc(100% /3);
height: 100%;
float: left;
margin:auto;
background-color: white;
display: table;
}
Can somebody tell me what my issue is? I have tried removing the text and it is not the issue.
Since you calculate the width by using 100/3, there will be rounding errors, where as a result the widths wont add up 100% again. What you can do to fix it is to set the width of two of the .menuOptionsWraps to 33% and one to 34%.
For example by doing so:
.menuOptionSelectedWrap {
float: left;
width: 33%;
height: 100%;
margin: auto;
margin-right: -4px;
background-color: #d6eef2;
display: table;
}
.menuOptionSelectedWrap:last-of-type {
width: 34%;
}
I'm not sure what you say,that black line change when window resize.check your css, width: calc(100% /3);
change the value 3,you will get idea.
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.
I've been working independently on designing a website for a local company and I've been stuck on how to make my layout/design to work responsively. As of right now, my content looks similar to this:
However, as the browser screen decreases, or if the browser is already on a smaller resolution, Item 3 would shift below both Item 1 and Item 2 with a width of 100%. While both Item 1 and Item 2 would be inline with each other. Much like this:
Initially, I had both wrapping divs (1 and 2) set to display: inline-block. But I couldn't find any sort of research that said that (after changing inline-block div container 2 in a respective media query) a child element could be inline with a separate element while another child element in the same container would not. Recently, I've started debating the use of display: table , display: table-row , and display: table-cell to try and organize content in a table-like layout, but I couldn't find a way to assign Item 1 and Item 2 into their own row while excluding Item 3.
Honestly it's been a while since I've had to mess with anything HTML/CSS/JavaScript/etc., so I'm a little rusty. I'm hoping to see if anyone can point me in the right direction or give me some insight. Thanks.
I used fluid design with basic div's you can see here https://jsfiddle.net/74x5975j/6/
<div class="group">
<div class="box-1">BOX 1</div>
<div class="box-2">BOX 2</div>
<div class="box-3">BOX 3</div>
</div>
here is the CSS with media query:
.group {
width: 600px;
height: 300px;
}
.box-1 {
width: 50%;
height: 100%;
float: left;
background-color: gray;
text-align: center;
float: left;
}
.box-2 {
width: 50%;
height: 50%;
float: left;
background-color: blue;
text-align: center;
float: left;
}
.box-3 {
width: 50%;
height: 50%;
float: left;
background-color: red;
text-align: center;
float: left;
}
#media only screen and (max-width: 599px){
.group {
width: 100%;
height: 450px;
}
.box-1 {
height: 66.666%;
}
.box-2 {
height: 66.666%;
}
.box-3 {
width: 100%;
height: 33.333%;
}
}
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;
working on a few design changes for my website on tablets and trying to work on this idea.
So the basic structure is like so:
<div id='container'>
<div id='leftbox'>Content</div>
<div id='rightsidebar'>Sidebar</div>
</div>
What i want, is for the container to be 100% width, but keep a right hand sidebar at 260px but allow the leftbox div to always fill the width left.
I have made a fiddle to show. But heres the CSS from that fiddle first:
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
}
#leftbox {
width: 50%;
height: 500px;
background-color: #666;
float: left;
}
#rightsidebar {
width: 260px;
height: 500px;
background-color: #333;
float: right;
}
Heres the fiddle: http://jsfiddle.net/X2w3D/
In that example I have just set the width of the left div to 50% to give it a width. The aim is that if the user was to be on a web browser, and resize then there would be no gap between the leftdiv and the rightsidebar. So the rightsidebar is always the same width, but the leftdiv will always fill the rest of the div up in width.
Thanks, Craig.
You might be interested on calc
width: calc(100% - 260px);
Demo
Referrence
Have you considered using the flexbox model? It was designed to answer this kind of problem.
I updated your fiddle and added an example solution: http://jsfiddle.net/X2w3D/4/
I used display:flex; on the container, then added flex-grow:1; to the #leftbox
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
display:flex; // ADDED THIS
}
#leftbox {
flex-grow:1; // ADDED THIS
height: 500px;
background-color: #666;
float: left;
}
Edit: If you need retro-compatibility for the flexbox model, I cannot recommend the amazing flexbox.less enough. It has saved my life quite a few times.