I'm more of a programmer than a web designer, I am trying to do a simple (I think) design like the home page of gmail https://mail.google.com/intl/fr/mail/help/about.html
I have a div in the center of my screen with a overflow:hidden so the background image don't resize.
In that div, I have 2 other div, one at the left and one at the right, the probleme is, since the main div is overflow:hidden when i shrink the page the right div is not visible anymore.
You can see a demo here : http://jsfiddle.net/e7MMQ/
first of all the background has nothing to do with div overflow , you could just use
background-attachment:fixed;
and for you divs
just use float : left; and float : right ;
if this what you are trying to do :
http://jsfiddle.net/prollygeek/e7MMQ/1/
it is because you have specified a width , and your div is still there but you to scroll to right to see it.
You can try applying overflow:hidden in your left/right divs and make them fixed. Thats assuming you dont have any content inside the larger container and everything is in the left/right div.
Then make your larger container a fixed size that is the combined size of your left/right divs.
HTML:
<div id="container">
<div id="left">Some content</div>
<div id="right">Some other content</div>
</div>
CSS:
#container{
width:300px;
height:300px;
}
#left{
float:left;
width:150px;
height:300px;
overflow:hidden;
}
#right{
float:right;
width:150px;
height:300px;
overflow:hidden;
}
Hope that helps!
Related
I have a page with multiple divs. They've all been sized and positioned according to various criteria.
[div1]
[div2]
[div3]
Now there's been a request to place a video (of a set width/height) behind one of the divs.
[div1]
[div2 - now with background video]
[div3]
How can I do this without affecting the existing layout in any way?
Here's a fiddle with the starting point for what I'm trying to do:
https://jsfiddle.net/gzdjL8kx/
I want the blue box (which represents the video) to remain centered (vertically and horizontally) behind the yellow box, without affecting the layout of the yellow/red/orange boxes at all, and in such a way that the layout of the yellow/red/orange boxes can be changed and the blue box's position will adapt so that it remains centered behind yellow. The blue box should also remain centered even if its width/height is changed.
Given that fiddle, here's my desired outcome, but I don't know how to achieve it:
https://i.imgur.com/k0S8WNF.png
Basically I want the blue box to be able to be positioned relative to the yellow box without affecting the other boxes at all. All my attempts to center it so far end ultimately up bumping the other boxes around too.
If you use position:absolute; on your video you'll remove it from the document flow, which stops it influencing the position of other relatively positioned divs.
If you're aiming for a lightbox style popup for your video you can centre it in the viewport using the following:
.yellow
{
width:250px;
height:150px;
margin:auto;
background-color:yellow;
position:relative;
}
.orange
{
width:500px;
height:100px;
margin:auto;
background-color:orange;
}
.red
{
width:100%;
height:150px;
background-color:red;
}
.blue
{
width:320px;
height:240px;
background-color:blue;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
<div class="orange">
</div>
<div class="yellow">
<div class="blue"></div>
</div>
<div class="red">
</div>
Here's an Illustration of what I need.
On the left a fixed div and on the right a horizontally scrolling div that is something like 12000px. I need the right div to center vertically in the window when it is re-sized. I can't get the usual tags I use (position:relative and margin:auto) to work on this. I assume it's because the div overflows on the sides of the screen?
This interface should accomplish what your mockup shows. Thanks.
http://jsfiddle.net/9tV4y/2/
I'm not at all good at laying out pages, but this CSS is what you want for the left, horizontally scrolled, div,
.horizontal_scroll{
float:left;
overflow:auto;
white-space: nowrap;
width : 500px;
height : 500px;
}
and applied to the div,
<div class="horizontal_scroll"> ... </div>
Both the width and height are percentage-based (although you can change either to any other type of length that you would like). If you change the width of the left column, be sure to change the left of the right column to be the same. The vertical positioning is done with the top:0;bottom:0;margin:auto 0;height:70%;. Positioning, top/bottom margin, and height must all be set in order for it to work.
Here's the jsFiddle Demo.
HTML
<div id="lc"></div>
<div id="rc">Here's some text that does not wrap. This would be replaced with images, of course.</div>
CSS
<style>
html, body {height:100%;}
#lc {position:fixed; top:0px; left:0px; width:20%; height:100%; background:lime;}
#rc {background:red; height:75%; position:fixed; left:20%;right:0;top:0; bottom:0;margin:auto 0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;}
</style>
Note: Be sure to set the height of all elements from html to #lc/#rc's parent nodes to 100%.
I have a div whose width and height are some fixed percentages of the browser-window, say 70% and 80%, with certain min-width and min-height. I want this div to be displayed both vertically as well as horizontally centered in the browser window. As the browser window is resized, I want the div to automatically resize and also keep itself in the center.
Firstly, it is not a div of fixed width or height, so I cannot use absolute positioning with negative margins. I have used the usual position: static and set left and right margins to auto for the horizontal centering. This ensures automatic resizing and centering with browser window resize only in the horizontal direction. This kind of thing doesn't work for vertical centering. And I can't use negative margins for that as the position is not absolute (I need it to be static for the horizontal).
I saw here and here on StackOverflow that there could be a solution for variable-size divs by using display:table-cell. Is there preferably any other solution, maybe slightly simpler, using only some setting of position, margin etc.?
Here's the demo site where I want to apply this layout.
Thanks a lot in advance!
You could also try something really simple like:
<head>
<style type="text/css">
body, html {
height:100%;
margin:0;
}
#div1 {
height:10%;
}
#div2 {
background:#F00;
height:80%;
margin:0px auto;
width:80%;
}
#div3 {
height:10%;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>
Of course this technique needs to extra divs, which makes it not-so-very-sexy - but i'm quite sure it's pretty cross-browser safe...
I can't seem to float DIV's correctly. What i am trying to achieve is being able to position 4 DIV's next to each other. Each aligned to the top at 0px, and spaced apart by 30 or so pixels, but i cannot use absolute positioning. The size of the DIV's are adjusted according to screen size. So, i need to position the DIV's relatively. When i try to float the DIV's they just sit atop each other.
Here is what i have thus far.
<head>
<style type="text/css">
.b1{
position:relative;
margin-left:50px;
float:left;
width:1000px;
height:200px;
background-color:#000;
}
.b4{
position:relative;
top:0px;
left:30px;
float:right;
width:1000px;
height:200px;
background-color:#000;
}
</style>
</head>
<body>
<div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"></div>
</body>
The problem is your viewport. When you float a series of elements, they will wrap to the next line if the viewport is not wide enough to display them on one line. To see what I mean, decrease the width of .b1 to 100.
You can add a container div if you really want this that can scroll horizontally.
<div class="container">
<div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"></div>
</div>
With the parent container style of:
overflow: scroll;
Floated the elements will stack when their container isn't wide enough to align them horizontally. Put the four divs inside a container that's wide enough for all of them to fit (presumably 4000px + whatever margin and padding you want on each). In your question, you mention 30px, but your example uses a 50px left margin. Here's an example with a 50px left margin. http://jsfiddle.net/brianflanagan/9ZUw5/
Add a wrapper and make the wrapper large enough to fit your DIVs:
<div class="wrapper">
<div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"</div>
</div>
.wrapper {
width:3500px;
}
I want to make an HTML, CSS page where the layout is as:
<div id="content">
<div id="left">
.....
</div>
<div id="right">
.....
</div>
</div>
The content div has a background image which should be repeated in y-direction. Also the left and right div should be side by side over the same background image.I am able to accomplish it but by keeping the height of the content fixed but I don't want to make the content's height fixed. Please help me folks.
Thanks in Advance :)
without seeing your code... my guess is you're floating the left and right DIVs... but you're not floating the content DIV...
your CSS should look similar to this to make it work:
#content {
float:left;
background-image:url('whatever.png');
background-repeat:repeat-y;
}
#left {
float:left;
}
#right {
float:left;
}
I am able to accomplish it but by
keeping the height of the content
fixed but I don't want to make the
content's height fixed.
If you are able to repeat the background image in the Y direction then it shouldn't matter how heigh the #content div is, as your background will just fill the remaining space - correct?
If your content div is not expanding to the height of the child div's then clearly #content must be outside of the normal flow of the page, in which case you should float it and not set a height for the container div.
It's quite hard to understand what you're trying to do, but I think what you want to do is add overflow: auto to your content div, so that it becomes the same height as the left and right divs:
#content {
overflow: auto;
background: [bg code]
}
#left, #right {
float: left;
}