Making 3 column responsive design using media queries is simple, but in case I want the middle column to stay in mid with 100% height and the right column goes on the left column it gets tricky.
The problem emerge because mid column height is variable, therefore it will be impossible to give negative margin-top to the transformed right column.
here is css code example:
/* 3 columns css */
.colLeft, .colRight, .colMid{
width: 280px;
float: left;
}
.colMid{
width: 500px;
}
.colRight{
width: 240px;
}
.container{
width: 1020px;
margin: 0 auto;
}
/* Media queries */
#media screen and (max-width: 1020px) {
.container {
width: 780px!important;
}
.rightCol{
width: 280px;
}
}
Html:
<div class="container">
<div class="leftCol">
</div>
<div class="midCol">
</div>
<div class="rightCol">
</div>
</div>
this code works fine, But mid column height push the transformed right column down.
My question: Is there HTML/CSS solution for this issue? or do I have to change HTML rendering when screen re-size?
Thanks,
Looks like your float: left is being applied to your .colRight class. This could be what is causing your right column to display on your left column.
I found the solution, using only CSS/HTML. Here is the explanation:
I created a duplicate rightCol div and placed it inside leftCol div, and named it righCol-left.
Initially the rightCol-left is set to "display:none"
when media screen is lower than 1020px, hide rightCol (display:none), and display rightCol-left (display:block)
here is the CSS:
.rightCol-left{display:none;} /*duplicate div*/
#media screen and (max-width: 1020px) {
.container {
width:780px!important;
}
.rightCol{
display:none;
}
.rightCol-left{
display:block;
width:280px;
}
}
here is the HTML:
<div class="leftCol">
/*Left column content*/
<div class="rightCol-left"> /* will be displayed when screen is below 1020px */
</div>
</div>
<div class="midCol">
/* mid column content */
</div>
<div class="rightCol"> /* gets hidden when screen is below 1020px */
</div>
This works perfect, the only bad thing would be the repeated HTML code. But this is not noticeable and very minor, after all, HTML code produce far less load to the webpage compared to JavaScript or anything else.
Related
I have three images side by side in my web page and in the responsive CSS media query for mobile, I want the third image to be centered on the next line with the first two above it, one floating left, one floating right. I can't do it! How do I write this CSS?
You should share you code, but I'll try to help you even so.
<div class="main">
<div class="image-left"><img src=""></div>
<div class="image-right"><img src=""></div>
<div class="image-center"><img src=""></div>
</div>
CSS:
.main {
position: relative;
max-width: 100%;
}
.image-left {
float: left;
}
.image-center {
margin-top: 5%;
margin-left: 10% ;
position: absolute;
}
You need to adjust .image-center { margin-top and margin-left according to your layout.
If you need space between image-left and image-right, you add another class;
.image-right {
margin-left: 10px;
}
I have been trying to build a website having a 3 column layout. All of the body is given a margin:0 auto to keep it at the centre, and has a minimum width of 1218px.
Now, what I want to do is reposition the right column in such a way the it goes below the left column without affecting the centre column. A live example would be twitter home page, where at the left I can see my profile and trends, the centre column features the tweets and the right column shows suggestions on a 1366x768 screen, now if I change the screen size to 1024x768, the column of suggestions at right goes down below the left column but the central timeline is unaffected.
The definition would be:
<div class="containter" style="margin:0px auto;">
<div class="left-col" style="width:290px; float:left;">Left Stuff goes here </div>
<div class="center-col" style="width:590px; float:right;"> Center body </div>
<div class="right-col" style="width:290px; float:right;">right Stuff goes here </div>
</div>
Now note that the central column has a right float, copied from twitter.
I can't use media queries for that since the website is going to deal with a lot of old browsers and also I would like to avoid JavaScript if possible.
Any help?
You can't do that with "min-width" of the main container. You must use "max-width" since you want to make sure something happens when the screen width gets more narrow. And the main column (in the center) has to be left-floated, not right. Here's a possible solution. However the whole questions seems weird to me since you want to make a responsive layout in an old browser that doesn't support responsive CSS.
<style>
.container {
max-width: 1218px;
}
.leftColumn {
float: left;
width: 300px;
height: 500px;
background-color: brown;
}
.mainColumn {
float: left;
width: 700px;
height: 500px;
background-color: darkgreen;
}
.suggestions {
float: left;
width: 218px;
height: 500px;
background-color: darkorange;
}
.cleaner {
clear: both;
}
</style>
<div class="container">
<div class="leftColumn">
LEFT
</div>
<div class="mainColumn">
MAIN
</div>
<div class="suggestions">
SUGGESTIONS
</div>
<div class="cleaner"></div>
</div>
I need a header which has two div's side by side with two image tag within each.It works well on every browser except Internet Explorer 11.What should I do?Please help.Here is my code..
My html:
<div id="Header">
<div id="Heder_Logo_Uttara" style="width:50%;">
<img src="IBU_Image/uttora_bank_logo.jpg" style="width:100%; height: 130px;" />
</div>
<div id="Header_Right_Uttara">
<img src="IBU_Image/ibankultimus.png" style="float:right; padding-top:50px;"/>
</div>
</div>
CSS:
#Header
{
width: 1000px;
height: 130px;
background-color:Green;
}
#Heder_Logo_Uttara
{
float:left;
margin:0;
width:50%;
height: 130px;
}
#Header_Right_Uttara
{
float:right;
width:50%;
height: 130px;
}
Also, here is my pen which work fine except IE11. On IE11 my #Heder_Logo_Uttara container image go back to left side corner and #Header_Right_Uttara overlap left container remaining space.
I have added the the following conditional css and it is working fine now.
#media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
*::-ms-backdrop, #Header {
padding-left: 250px;
display: flex;
}
}
There's a couple things you can try:
To get the children divs to align center horizontally (which I think you're referring to in your question) you can put
margin:auto;
In the CSS for the parent div. If you want the divs to display side by side, you can try adding
display: flex;
To the parent DIV, which will tell the div to display it's children in a row-first manner. But like the commenters say, it'd be helpful to see the images, or perhaps a screenshot of what you're trying to accomplish, and what you're seeing in IE11. Good luck!
I have for divs:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
On desktop, they are positioned like this:
1
2
3
4
On mobile, I would like them to be positioned like this:
1 3
2 4
if i do
div{
width: 50%;
float: left;
clear left;
}
#3,#4{
float: right;
clear: right;
}
They end up like this:
1
2 3
4
The divs are dynamically generated, so if I can avoid adding additional markup, that would be very good.
Demo Fiddle
Given the HTML
<div class='wrapper'>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
</div>
You could use the CSS:
.wrapper > div {
border:1px solid; /* <-- not needed, used to show div locations */
height:100px; /* <-- not needed, used to show div locations */
}
#media screen and (max-width: 300px) { /* <-- apply styles on certian screen size */
.wrapper {
-webkit-column-count:2; /* <--put the divs in two columns */
-moz-column-count:2; /* <--put the divs in two columns */
column-count:2; /* <--put the divs in two columns */
}
}
Changing the 300px for whatever you deem a mobile device screen to be
I know this has been answered, but I thought I'd give you a different perspective and actually a more commonly used one as well. If you apply bootstrap framework (even if not to a global extend) but you can gut out the css the is valid to your problem, you will be able to do this a lot more comfortably. without getting into css specifity. All you have to do is make proper us of col-md-12 and col-xs-6
See DEMO
Another approach would simply use media queries to change the width of the divs. This would allow you to avoid adding more markup.
http://jsfiddle.net/14ecjy7n/1/
div {
box-sizing: border-box;
float: left;
}
#media all and (max-width: 639px) {
div {
width: 50%;
}
}
#media all and (min-width: 640px) {
div {
width: 100%;
}
}
I have two divs, .left and .right in a .container div All of which widths are set in % and when I resize my browser the blocks resize too but the text <p> doesn't. Why is that?
Here's a link http://jsfiddle.net/TomasRR/WuNL3/10/
I have stated that .left and .right should always be 400px width when container gets 800px with this command
#media only screen and (max-width: 800px) {
.left, .right {
width: 400px;
}
however when resizing from browser's max width till 800px I want my text in .right resize too, I mean drop down on another line, so I could see the full sentence.
<div class="cont">
<div class="left">
<h1>Programming and fuss</h1>
<h2><em>by Tomas R. </em></h2>
<p>MY TOP 3 PAGES:</p>
TWITTER
WIKIPEDIA
VICE
</div>
<div class="right">
<p>"An ounce of practice is generally worth more than a ton of theory." <span>E. F. Schumacher.</span></p>
</div>
</div> <!-- .cont -->
the .left doesn't interest me. How to fix the text in .right is my question.
Your white-space:nowrap; entry in the css for your cont class is where the problem lies. This stops your paragraph from wrapping within the div
If you want the 2 divs to sit side by side, use float:left; and float:right;
To combat the problem with the right div dropping below the left div, you need to use width: calc(50% - 4px); for each div as you have borders around the divs of 1px thickness. If you adjust the border thickness you will need to adjust the pixels subtracted.
Your white-space:nowrap; entry in the css for your cont class is where the problem lies. This stops your paragraph from wrapping within the div
If you want the 2 divs to sit side by side, use float:left; and float:right;
I'd use float:left instead and also use a container element to keep the widths as 50% and not need use calc to compensate for the borders
<!-- HTML -->
<div class="left">
<div class="container">
Foo
</div>
</div>
<div class="right">
<div class="container">
Foo
</div>
</div>
/* CSS */
.cont {
width:100%;
}
.right .container { border:1px solid black; }
.right {
width:50%;
height:200px;
float:left;
}
.left .container { border:1px solid red; }
.left {
width:50%;
height:200px;
float:left;
vertical-align:top;
}
Demo
If you want them to always take up half of the width, you just have to remove the media query that you have that sets a set width when the browser is small
Demo
As a front end designer, I would recommend that at some point you use media queries to have the sections on top of each other when the screen is small so that it is responsive and readable on small screens, like this