What I am trying to do is, putting two divs in one line, the left div's width is fixed and the right one, gets resized when the browser is resized (achieved already). What I want to achieve is, set a resize limit for the right div, that is, the right div width decreases until the width is greater or equal to n px. after that the browser horizontal scroll.
(The reason for this is I have got a jquery tab on the right div with like 5 tabs, when I resize the browser the tabs jumps off on button of each other, hence I want to stop the right div to shrink until the last tab).
here is my code so far:
<div style="float: left; width: 300px; margin-right: 10px; ">
</div>
<div style="overflow: hidden;">
</div>
Please let me know if there is a better way of putting two div in one line (left width fixed and right resizable with limit).
Cheers,
You'll either be looking at min-width/max-width, or #media
For min-width just give a class or id to div2 and set min-width
#div2{
min-width:900px;
}
For control on different screen sizes use #media and set max/min widths.
#media only screen and (max-width: 499px) {
/* rules that only apply for canvases narrower than 500px */
}
#media only screen and (min-width: 500px) {
/* rules that only apply for canvases wider than 500px */
}
There's more information here: https://mislav.net/2010/04/targeted-css/
Try:
<div class='left'></div>
<div class='right'></div>
<styles>
.left {
float: left;
margin-right: 10px;
width: 300px;
}
.right {
float: left;
max-width: 300px;
overflow-x: auto;
}
</styles>
Related
Scenario :
I have two div. One div is title and another is form.
But when I resize it in some screen mobile it not correct.
Todo :
I want when I resize in some screen margin left div title and div form.It
mean when resize margin left of title according to the margin left div form.
How to fix it ?
I hope that I am getting this correct. My understanding is that you are hoping to place the title above the form when viewing on a mobile screen. This is easily done using media queries. See below. W3Schools | Media Queries
<div id="div1"></div>
<div id="div2"></div>
#media only screen and (max-width: 600px) {
.div1 {
display: block;
}
.div 2 {
display: block;
}
}
.div1 {
display: inline-block;
width: 40%;
}
.div 2 {
display: inline-block;
width: 40%;
}
Media queries are powerful because you can use them to dynamically filter styling methods like setting the divs above to display as block. (Filling the entire width of it's container) instead of being placed on the same line as the other block and taking only 40% of it's container. If needed, please submit a markup for review.
I have few divs on my page, which serve as a containers. Here is a sample CSS code of one of the divs:
header {
background-color: #fff;
height: 153px;
width: 97%;
min-width: 1084.06px;
margin: 15px auto;
position: absolute;
left: 0;
right: 0;
border-radius: 20px;
}
This is a centered container for my header. There are several other containers which I have styled simillar way (absolute, centered and width in %).
Problem is, when I resize the window, all these containers hit the left side of the browser window. I want to save some margin on particular window width. How can I achieve that?
P.S. If I add margin-left it breaks my center position of the div
You can use media queries, media queries are only applied on specific conditions, such as a specific width.
For example the following background-color rule won't apply for screens wider than 480px:
#media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
For more info about media queries see this w3schools page
Add another margin-right
then straighten it out depending on what you use
parent container => flexible width(width depends on browser window)
child div => fixed width of 900px (inside parent)
My requirement is
if width of parent is more than 900 then align child div in center
if width of parent is less than 900 then align child div to the right. Hence left portion will be truncated.
Is there any pure css solution?
I fiddled it a little.
you basically need this, am I right?
#parent{
background-color: blue;
overflow: hidden;
direction:rtl;
}
.child{
width:900px;
float:right;
margin: 0 auto;
direction:ltr;
}
So direction to align the divs without making the child div float to the walls, and another direction inside child to not mess up the contents inside. margin: 0 auto; to center the div and overflow:hidden to truncate.
EDIT: Try it now.
you can try with media query..
For example:
#media only screen and (max-device-width: 900px) {
.div { margin: 0px auto }
}
#media only screen and (min-device-width: 900px) {
.div { float: left; }
}
You can try to combine css with that...
parent {direction:rtl}
child {direction:ltr;}
Basicly, overflow will scroll from right to left or will hide left side if hidden;
test and play with it here :) : http://codepen.io/gcyrillus/pen/GHCne
Have you looked into using media queries?
You'll just want to make sure they're supported in all the browsers you're targeting.
I am creating a design for my site using a recently downloaded bootstrap
I tried with row and span12 layout the container div is not centering to my screen. I'm using 58cm LED Monitor(its not looking centered).
The DIV width is showing 1170px(Firebug) its suppose to be 940px.
Please Check my design here http://rentbbsr.com/projects/daycare/
It suppose to be like this http://rentbbsr.com/projects/daycare/daycare.jpeg
I just want the header to be fixed and centered.
There are a bunch of reasons. You have negative left margin on the row:
#media (min-width: 1200px)
.row {
margin-left: -30px;
}
}
.row {
margin-left: -20px;
}
Then you have another margin on the span:
#media (min-width: 1200px)
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
Then your container that you centered is wider than the contents. As it is wider, it centres that element, but it has a empty area. If you set it to the width of whatever you want to center, such as the tree graphic or the menu below, it will actually be centred.
In this case i set it to the width of the top graphic:
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 988px;
}
Remember to also set it in the media query.
So in summary, your wrapper elements are wider than the contents, and you have various margins all over the place, which adjust the width even more. If you remove those and set the correct width it will center as expected.
Consider the following site.
I am trying to position a div that is approx 300px wide by about 400px high next to the picture of the woman. I have tried to display the div as inline but to no avail. I tried to float left but once again no luck. Any thoughts?
You can position it next to the image, by using the following CSS:
.emailForm {
width: 260px; /* anything above 260px will fall over to the next line */
/*float: right;*/ /* remove float */
display: inline-block; /* inline-block since you want specific width and height */
height: 434px;
border: 1px solid black;
}
NOTE: Pretty sure you are using it, but in case you aren't, do use Firebug or Chrome dev tools for making such tasks a breeze.
Try this,
<div id="wrap">
<div id="nextTo"></div>
<img id="woman" src="#" width="600px" height="400px" />
</div>
CSS
#wrap {width: 1000px; margin: 0 auto;}
#nextTo {float: right; max-height: 400px;}
This will ensure that your image is fixed width. If you have a wrapper div that is 1000px wide for example, the #nextTo div will be the remainder of what the image takes up (in my example 400px).
Adding the max-height attribute to the #nextTo div ensures that the div will not fall below the image, but not sure if this is what you are after.