I am having problem of floating the div when reducing the windows screen size. What I would like to achieve is I have two div side by side, both div are floating left. When I reduce the browser windows screen size, and the right div will move to the bottom of the left div. Please see the screenshots below:
At first, two divs are displayed side by side. After reduce the Browser windows size, the right div content will move to the bottom of the left div.
Use a parent div, and fix the size of the children: http://jsfiddle.net/zV9ea/
You need to work with a container.
example
html
<div id="container">
<div class="left"> Hello </div>
<div class="right"> World </div>
</div>
css
#container {
width: 100%;
margin: 0 auto;
}
#container .left {
width: 200px;
background-color: pink;
float: left;
}
#container .right {
width: 760px;
background-color: blue;
float: left;
}
See live: http://jsfiddle.net/s8wfx/
Related
So I'm attempting to create this effect where when the window is pulled big enough two divs align side by side but when made smaller the divs stack above each other and centred neatly.
So far I have this view.
The CSS for the DIV wrapping the image is:
div.pararight {
width:451px;
height:272px;
margin:0px auto;
position:relative;}
Titled 'Pararight' because when the screen is this wide the divs should sit by side with the image on right.
The CSS for the DIV wrapping the text is:
div.paraleft {
width:480px;
margin:0px auto;
position:relative;}
Named 'paraleft' as the text will align to the left.
It's also important to mention. I think, these 2 DIVs are wrapped in another DIV which is:
div.hitterbox {
width:100%;
margin: 0px auto;
font-family: sans-serif;
font-size: 13pt;
line-height:18pt}
Mainly because there will be multiple of these hitterbox div's down the page and it was easier to copy paste and change the HTML content, don't need to explain that though I'm asking for your help!
Finally another piece of information is that the container holding the hitterbox is another DIV which has the CSS:
div.pagecontent {
padding:10px;
font-family: sans-serif;
font-size:12pt;
position:static;
text-align:center;}
Finally the HTML for it all:
<div class="pagecontent">
<div class="hitterbox">
<div class="pararight"><img src="images/Macbook.png" width="451" height="272" alt="Mac Book"/></div>
<div class="paraleft">The Onscreen Text</div>
</div>
</div>
</div>
I put pararight above paraleft so it aligns up and down that way as you can see. The white page container of all the DIVs mentioned below is 1200px wide at the moment so enough room to sit both of these guys side by side.
What would I need to to make the text DIV move to the side of the image and the image to the right. I have used float:left, float:right in the respective DIVs but then when its shrunk down to create the stack effect they are shifted right and left respectively until the user shrinks the page down to 480px when the text will be centred but the image will still float slightly right.
What have I done wrong here? :o
I would use display: inline-block, then add text-align: center in the parent element.
JSFiddle: http://jsfiddle.net/gW8r2/1
.parent {
width: 100%;
height: 100%;
border: 1px solid green;
text-align: center;
}
.parent > div {
display: inline-block;
}
.a {
width: 100px;
height: 100px;
background: red;
}
.b {
width: 200px;
height: 100px;
background: blue;
}
This is a generalized solution. In your case, .parent would be .hitterbox, .a would be .paraleft, and .b would be .pararight.
I have something like this:
<div class="top">top</div>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="bottom">bottom</div>
Relevant code in jsFiddle
As you can see, between top and bottom divs, there is a div container. I want this div container to move bottom dive as much as is needed (and i don't want it to be a fixed value - that means if, lets say left container will get much higher - the bottom div will be pushed down as well.
How can i do that?
This is a simple seeming problem that ends up being kind of tricky. The above suggestion about position:relative vs. position:absolute are a good first step. After that you need to make some room for the set width right div:
.left {
height: 100%;
min-height: 50px;
border:1px dashed red;
padding-right: 50px; <---
}
Then float your right div in the space you made:
.right {
float:right; <---
width: 50px; (This needs to match the padding-right value above.)
text-align: right;
min-height: 50px;
height: 100%;
border:1px dashed blue;
}
Finally, put the right div before the left div in the html:
<div class="top">top</div>
<div class="container">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="bottom">bottom</div>
(Tested in Chrome and IE.)
See: Right div fix width, left div extend to max width?
You can check out a fiddle here: http://jsfiddle.net/x3QfG/1/
Will that work for you?
Right now you're using absolute positions for the left/right div's, so you will always need to know the height in order to position the bottom div correctly. What you want to do is float these instead, then clear the floats in the bottom div. That way the left/right can be as high as their contents, and the bottom div will always appear below.
.bottom {
clear: both;
}
.left {
float: left;
width: 50%;
min-height: 50px;
}
.right {
float: right;
width: 50%;
min-height: 150px;
}
I've modified your jsFiddle accordingly, and made the right div higher to show how the bottom always appears below.
Use floats rather than positioning them absolutely. That will make your architecture very much fluid and flexible.
After you apply necessary float values to your .left and .right, use a clearfix hack to contain your floated elements within the container. Now whenever any of the .left or .right divs increase in height, the bottom div will be pushed down.
Make Container Relative and left and right absolute,and for positioning set width rather than using float.
So yet another question about vertically aligning an image within a div, but I think mine is different than the others I've found on here. I can't seem to find a solution that works for my situation.
I have a DIV that is 100% width (to it's container, which is floating left and has a set pixel width) and has a set pixel height. I have an image inside that I am positioning absolute to get it to the background of content within the DIV. The image is fluid with a width of 100%.
All works well, but I want to get the image to vertically align to the middle of the container and height is unknown.
Here is some sample code that shows what I'm trying to do:
<div class="container">
<div class="image-wrapper">
<img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg"
width="100%" />
</div>
<p>Some text</p>
</div>
And some sample CSS:
.container {
width:100%;
margin-top:10px;
height:100px;
overflow:hidden;
}
.image-wrapper {
position: relative;
}
.image-wrapper > img {
position: absolute;
z-index: -1;
}
p {
text-align: center;
padding-top: 10px;
color:#fff;
font-weight: bold;
}
But the flower should show up with it's center visible within the container div.
Any thoughts? I'm trying to avoid any Javascript sizing (the outer container, not shown in this sample, is already being sized). I'm not opposed to more DIVs, tables.. whatever you got!
A jsFiddle to demo this:
http://jsfiddle.net/JonMcL/sNz9h/
Why not go for the background-image property? That allows vertical centering...
http://jsfiddle.net/urrWS/
Assuming you want to only scale the image down and not stretch it beyond its native resolution this should do the trick. A little bit of jQuery is involved but it's minimal. Essentially, this adjusts the top-margin of the IMG on the window.resize event.
HTML
<div id="container">
<img id="image" src="image.jpg"> <!-- native size is 480x300 -->
</div>
CSS
#container {
margin: auto;
width: 80%;
height: 300px;
border: 1px solid gray;
}
#image {
display: block;
width: 100%;
max-width: 480px;
margin: auto;
}
jQuery
function adjustImage() {
$("#image").css('margin-top', ($("#container").height() - $("#image").height()) / 2);
}
$(window).load(function() {
adjustImage();
$(window).resize(function() {
adjustImage();
});
});
If I get what you need I would suggest setting the background image via css, then you can set the position correctly etc.
.container {
width:100%;
margin-top:10px;
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg");
background-repeat:no-repeat;
background-position:left center;
height:100px;
overflow:hidden;
}
http://jsfiddle.net/sNz9h/6/
I need to do a website with divs. See the code snippet for the format. The MENU is of variable height, depending if the menu-items is rolled out or not, and the content is of variable height as well, but with a minimum of 700px. If the MENU is folded together to its min-height, it is 300px, and the BOX should take up the remaining space so MENU+BOX is the same height as the CONTENT. The content of BOX is 600px, so when BOX only gets 400px, there should be scrollbars. When the CONTENT div expands, the BOX should expand as well, so they stay the same height.
Here's what i got so far, but it is not working properly. I've tried some other stuff, but deleted it for this post so I only get the points shown instead. Hope you can help, and thank you in advance!
#container{ width: 800px; }
#leftbar{ float: left; width: 250px; background-color: lightgray; }
#content { float: left; width: 550px; background-color: white; }
#menu { width: 250px; }
#box { width: 250px; height: 300px; overflow-y: scroll; }
<div id="container">
<div id="leftbar">
<div id="menu">
<div id="box">
</div>
<div id="content"></div>
</div>
<div style="clear:both;"></div>
hi at the first look i can see you have some unclosed div tags, and probably that's why it doesn't do what you want. You can assign scroll bars by using java script, if you set overflow from the css it will have a scroll bar from the beginning
I have three columns on a webpage. One at the left hand side. Other at the center and the last one at the right hand side. I want to shift the right div below the left div (and left div is an expandable div).
But the problem is that the right div and the center div have the same parent div. And the left div and the parent of right and center div have the same parent. This is what I mean to say-
<container>
<leftContainer>
<leftColumn>
<mainContent>
<rightColumn>
<centerColumn>
And I want to shift the <rightColumn> below the <leftColumn>. Is it possible ?
Also since I am working on a custom user stylesheet, I cannot change the code, I can only modify the CSS.
How do I do this ?
If you know the height of the left div, you can float: left each div and then use a negative margin-height on the centerColumn of the height of the left column.
Example: <-- click for a demo
<div id="container">
<div id="left_container">
<div id="left">left</div>
</div>
<div id="right_container">
<div id="right">right</div>
<div id="middle">middle</div>
</div>
</div>
<style type="text/css">
#container {
width: 160px;
}
#left {
float: left;
width: 80px;
height: 100px;
background-color: #eee;
}
#right {
clear: left;
float: left;
width: 80px;
height: 100px;
background-color: #ccc;
}
#middle {
float: right;
width: 80px;
height: 100px;
margin-top: -100px;
background-color: #aaa;
}
</style>
I don't believe this is possible with an "easy" fix. You can think of divs as boxes, and what you're trying to do is to keep the center column to the right of the left column while putting the right column below (which would distort the box).
There is a fix where you can make the rightColumn position absolute and set the position of the column relative to the window itself. However, I don't suggest you do this. Instead, you should probably modify the css and put the right column in the same parent div as the left column.