<div class="main">
<div class="cleft">
</div>
<div class="cright">
</div>
</div>
.cleft{
float: left;
padding-left: 1%;
width: 68%;
}
.cright{
float: right;
padding-right: 1%;
width: 28%;
}
I have two box left and right. I want a thing that I want to put left and right box width:100% when someone resize the width and width are less then the main-container (1075px in my case).
How I can make 100% width of left and right and right will shown on bottom.
note: I have made some changes for ipad,iphone and they work fine in that case. but How I can applied for that thing when someone resize the browser.
I think you want to use media queries:
http://css-tricks.com/css-media-queries/
#media screen and (max-width: 1075px) {
.cleft, .cright {
float:none;
width:50%;
padding:none;
}
}
Related
I am new at HTML and CSS and I want to make a responsive header that contains:
logo picture with margin-left in pixels when full resolution
pogo picture must have it's full size when full resolution
navigation menu with 6 and width of 1500 when full resolution
No Bootstrap. What are your suggestion to accomplish that? What I have made so far is not responsive, on full size (width:1920px) measures are fine and it looks exactly how it should, but when I try to resize browser it is not in one row, even if I declare that div "inner" that contains them is width:100%, and both of them are also width:100%.
Code is something like this:
.inner{
width:100%;
}
.navigation {
display: inline-block;
float: right;
text-align: center;
padding-top:47px;
padding-bottom:27px;
max-width:1555px;
width:100%;
}
.navigation li{
display: inline-block;
width: 16%;
}
.navigation ul{
max-width: 1500px;
}
.wrapper-logo{
display: inline-block;
max-width:365px;
width:100%;
}
.small-logo{
max-width: 143px;
width:100%;
padding-left:220px;
}
<div class="inner">
<div class="logo-wrapper">
<div class="small-logo">
<img src="https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F24%2F31%2Fb7bd820a-ecc0-4170-8f4e-3db2e73b0f4a%2F550250_artsigma.png?auto=format&ch=Width%2CDPR&w=250&h=250">
</div>
</div>
<div class="navigation">
<ul><li>......</li></ul>
</div>
</div>
Use media queries.
Here goes my Desktop resolution css
#media only screen and (max-width: 600px) {
/* Here goes my Mobile resolution css */
body {
background-color: lightblue;
}
}
You'll want something like the following for bullet 1
.small-logo {
margin-left: 10%;
}
#media only screen and (max-width: 600px) {
.small-logo {
margin-left: 0;
}
}
Bullet 2 I'm guessing should say Logo not Pogo. Based on the code provided .small-logo is your only logo so you'd do something like this.
.small-logo{
width: 100%
}
What does the navigation menu have 6 of? Columns? Buttons? Unicorns?
Set the inner class or preferably an id of the largest content div to the max I generally like to center the content and give some side white space so I put the basics in the comments.
.inner{
max-width: 1500px;
width: 100%;
/*width: 85%;
margin: auto 0;*/
}
Are you trying to have logo-wrapper and navigation horizontally aligned?
display: inline-block;
I have 3 div side by side, my problem is that they don't appear as I intended on a mobile phone. The page looks like it should be on a laptop/wide screen.
Here is the page:
http://dennissøderkvist.dk/?page_id=35
So you see there is the div with a contact formular, a div with the google map, and a div with address info. If you open it on a mobile phone, it looks horrible, the last div at the end jumps down. How can I solve this?
Here is my css:
#conHolderDiv
{
float: left;
width: 35%;
}
#mapHolderDiv
{
float: left;
width:40%;
padding-left: 15px;
}
#adrDiv
{
float: right;
width: 20%;
}
The conHolderDiv is the first div, that holds the contactform. The mapHolderDiv is the div that holds the map, and the adrDiv holds the address
As previously mentioned, you could use Bootstrap. Or learn about responsive design.
For your example, with the three column layout you are on about you can use Media Queries to target divs that meet certain screen sizes.
#media only screen and (max-width:1000px) {
#conHolderDiv, #mapHolderDiv, #adrDiv {
float:none;
width:100%
}
}
This will give you a 1x3 layout, rather than 3x3. We are not floating the elements, and assigning a width that takes up 100% of the space.
or you can always use display:table
<div style="display:table; width:100%;">
<div style="display:table-row">
<div id="conHolderDiv"></div>
<div id="mapHolderDiv"></div>
<div id="adrDiv"></div>
</div>
</div>
and the css will be
#conHolderDiv {
display:table-cell;
width: 35%;
}
#mapHolderDiv {
display:table-cell;
width:40%;
padding-left: 15px;
}
#adrDiv {
display:table-cell;
width: 20%;
}
I have a responsive header which is quite complex.
The left block is fixed width and the right block is a percentage (100%) I found this great article here on how to do that except I need it the other way around, this example is right block fixed.
http://radiatingstar.com/make-a-layout-with-fluid-and-fixed-size-columns
I did get it working at one point but can't remember how I did it, there should be no scrollbar the outer container should be 100%. The real issue is that in the right block I have 2 inner divs, 1 div should be horizontally centered on the screen not centered in it's div as the fixed left block has pushed it over already.
http://jsfiddle.net/3519a9p0/1/
<div id="container">
<div id=fixed-width>
</div>
<div id=fluid>
<div class="farRight">right icons</div>
<div class="centeredBlock">centered on screen block</div>
</div>
</div>
And the other challenge is the responsive part in that the right icon block as you can see that that is floated to the right should move on top of the centered block as the screen width shrinks.
It would appear that I need to float the centered block too but then it needs to the centered middle of the screen too.
The the fixed width left block could potentially be a float too but it doesn't really matter as after the screen gets to small I switch to completely different layout, it's just the 2 inner divs that I need centered and responsive.
You're a genius if you can solve this!
Cheers!
Here is a working example. I just got rid of the margin and the float. However, while the answer was simple, you should read on below to understand why this worked.
Working Example
Because the left div has a float: left attribute, you can just set the right div to take up 100% of the remaining space. You do not need the negative margin to work the div into its place.
Also, a floated element is taken out of the normal flow of the document, so now you can use margin: 0 auto and as long as the right div has 100% width, it will center across the entire screen.
Update
There were post-question requests made via comments. To solve the issue, I added media queries and removed the float on the right-side div. Also, I had to add extra markup so that the inner divs on the right-hand side could be absolutely positioned properly.
Here is revised CSS. The major changes are:
No need to float the fluid column, add left margin instead
To center a box on the screen, set relative positioning on the container (not the fluid box) and use absolute positioning on the box
As for responsiveness, you can simply remove float, width, height and positioning from elements so that they appear as rows.
/* body margin/padding is reset to get media queries right */
body {
margin: 0;
padding: 0;
}
#container {
position: relative;
height: 100px;
}
#fixed-width {
float: left;
width: 250px;
height: 100%;
background-color: blue;
}
#fluid {
margin-left: 250px;
height: 100%;
background-color: green;
}
.farRight {
float: right;
width: 100px;
height: 40px;
color: white;
background-color: black;
}
.centeredBlock {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 200px;
height: 40px;
color: white;
background-color: tomato;
}
/* when screen is narrower than 250+200+250 pixels trigger breakpoint 1 */
#media screen and (max-width: 699px) {
.farRight {
float: none;
width: auto;
}
.centeredBlock {
position: static;
width: auto;
}
}
/* when screen is narrower than whatever-you-want pixels trigger breakpoint 2 */
#media screen and (max-width: 499px) {
#container {
height: auto;
}
#fixed-width {
float: none;
width: auto;
height: auto;
}
#fluid {
margin-left: 0;
height: auto;
}
}
<div id="container">
<div id="fixed-width">fixed width</div>
<div id="fluid">
<div class="farRight">right icons</div>
<div class="centeredBlock">centered on screen block</div>
</div>
</div>
I have a div stretching the height of my page, with float left, eg:
#leftvignette {
width: 200px;
height: 100%;
float: left;
}
#sitecontent {
margin: auto;
width: 1000px;
}
HTML:
<div id="leftvignette"></div>
<div id="sitecontent">
all other content here
</div>
I want this div to always sit at the left of my content until the window is less then 1000px wide - I dont want the #leftvignette to intrude and cover my content.
Does anyone know a way to do this?
Use CSS Media queries and the CSS clear property to remove the float:
#media all and (max-width: 1000px) {
#leftvignette {
clear:both;
}
}
Anything below 1000px will then have the float: left removed.
#leftvignette {
width: 200px;
height: 100px;
float: left;
background:#000;
}
#sitecontent {
margin: auto;
width: 1000px;
background:#f00;
height:200px;
float:left;
}
.clear{clear:both;}
<div id="leftvignette"></div>
<div id="sitecontent">
all other content here
</div>
<div class="clear">
<!--this will help in clearing float for next comming elements.-->
</div>
I suggest you to create some util classes like for example .clear and use them whenever you need just applying the in html as class.
CSS:
.clear{
clear:both;
}
HTML
<div id="leftvignette" class="clear"></div>
Remember to use it after float; it will clear both sides of your div so no element will be placed to the left and right of your "Box".
In your case is better if you use media queries, like that:
#media screen and (max-width:1000px){
#leftvignette{
clear:both;
}
}
Am sure this is very obvious... but I can't seem to figure it out.
I have two divs that I need above one another when the media width is small, and beside each other when large. The right one is fixed width, and the left is variable. However, when the media width is small, they end up in the wrong order. If I swap around the divs in the html, they no longer line up nicely.
Here is the fiddle. http://jsfiddle.net/CwMTU/2/
HTML
<div class="right"> right content fixed width </div>
<div class="left"> left navbar variable width </div>
CSS
.right {
width: 200px;
float: right;}
.left{
margin-right: 200px;}
#media (max-width: 500px) {
.left {
width: 100%;}
.right {
width: 100%;}
}
I just did it using an extra wrapper div and display:table/table-cell (set back to block in the media query)
http://jsfiddle.net/CwMTU/4/
Change the order of the <div>'s
<div class="left">
left navbar variable width
</div>
<div class="right">
right content fixed width
</div>
And change the float in both classes.. Add a width:100%; with a margin-right of -200px, to get your right div next to it.
.right {
width: 200px;
float: left;
background:green;
}
.left{
background:red;
float:left;
width:100%;
margin-right:-200px;
}
JsFiddle is updated with this:
#media (max-width: 500px) {
.left {
width: 100%;
margin-right:0; <--------
}
Your JsFiddle but updated