Please see the attached image,I want to design this in html,Quite successful.But when I test it on different resolutions the red box moves here and there.I made the design in 100% width and height 100%
<style type="text/css">
#green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; }
#blue-box { width: 25%; background: blue; float: left; height: 100%; }
#red-box {
position: relative;
top: 50px;
left:450px;
width: 357px;
background: red;
height: 207px;
margin:0 auto;
}
#green-box-content
{
margin:0 auto;
width:1600px;
height:800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>
Part of the problem is in how you are trying to position the element. It looks like you want it to be centered between the blue and green, but you're positioning from the left-hand side. Once the width of the green changes, it won't be where you want it. It would be better to position from the right (the border between the two) and set right to -1/2 of the width.
Also, 100% height will only work if the parent containers have a set height
Here's the modified CSS, and a fiddle to demonstrate
#blue-box,
#green-box {
height: 300px;
}
#green-box {
position: relative;
width: 75%;
float: left;
background: green;
}
#blue-box {
width: 25%;
float: left;
background: blue;
}
#red-box {
position: absolute;
top: 50px;
right: -178px; /* width / 2 */
width: 357px;
height: 207px;
background: red;
}
Remove width and height from #green-box-content, works perfectly in my local.
#green-box-content
{
margin:0 auto;
}
check this after making the change in my local.
I think you should Percentage of the red box as you have used it for green and blue and position as absolute.
http://jsfiddle.net/ccEKk/
if I am wrong update the fiddle so that someone can help you with it
#red-box {
position: absolute;
top: 5%;
left:45%;
width: 35%;
background: red;
height: 20%;
margin:0 auto;
}
Related
i have two divs
first div : text-logo
.text-logo {
width: 250px;
height: 60px;
margin: auto;
border: 2px solid #07a2a0;
border-radius: 15px 50px 15px 50px;
margin-top: 100px;
}
<div class="text-logo"><h4>Just training/cit</h4></div>
second div : image-logo
.image-logo { overflow: hidden; height: 500px;}
.image-logo .left
{
float: left ;
width: 30%;
position: relative;
}
.image-logo .right
{
float: left;
width: 70%;
}
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
}
<div class="image-logo">
<div class="left">
<img src="images/logo.png">
</div>
<div class="right">
<h2>Being auomated much more easy than the manual things
</h2>
<hr>
</div>
i cant see the blue logo with the original size, the upper part of the logo is hidden ,
the picture will show you the problem
,
Try to add z-index
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:2;
}
That's because the div .text-logo is above your logo div. You should change the z-index of one of them. It defines which element should be above another element. Use for your z-index a realistic value, to keep your code a bit cleaner.
.image-logo .left img {
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:5;
}
Check that the element's color is not the same as the background color, as that will obviously make you not to see your element.
I have been a victim of this severally. Hope it helps someone.
Hello Stack overflow users.
I'm in a bit of a struggle here, I have 4 divs.
I would like for div 4 to have it's width adjusted if the screen size is adjusted. Basically just stay within the other divs, and adjust.
Div 1,2 and 3 all have position:fixed to avoid them from moving when a user scrolls on the page.
But whatever I try, with width:autoETC. div 4 keeps going the full length behind div 3. I have a margin set for it to pass by div 1's width length.
I've been having a hard time wrapping my head around this one, the code for my divs are listed below.
.navbar-left {
position: fixed;
width: 325px;
top: 0px;
bottom: 0;
z-index: 1001;
height:auto;
}
.navbar-top{
width:100%;
height:60px;
position:fixed;
top:0;
z-index:1002;
}
.navbar-right{
width: 365px;
top:0;
height:100%;
position:fixed;
right:0;
}
Div 4 is not listed, as the code did not work. Any help is greatly appreciated.
Try this fiddle
If you need to use position fixed (really I didn't understand why) you could use percentage for main div, and pixels for sidebars.
In main div to set the width use this:
width: calc(100% - 400px);
Where 400px is the sum of the width of your both sidebars
HTML
<div clas="container">
<div class="top">top</div>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
CSS
.container {width: 100%; height: 100%;}
.top {
position: fixed;
clear: both;
width: 100%;
height: 20%;
background-color: #d5d5d5;
}
.left {
position: fixed;
top: 20%;
width: 40px;
float: left;
height: 80%;
background-color: green;
}
.main {
width: calc(100% - 80px);
height: 80%;
position: fixed;
top: 20%;
left: 40px;
background-color: grey;
}
.right {
width: 40px;
height: 80%;
position: fixed;
top: 20%;
right: 0;
background-color: green;
}
Try this code...
.div4{ width:calc(100% - 730px);
background-color: green;
margin:0 auto;
position:relative;
top:60px;}
where 730px is sum of left and right div widths...
Use percents for navbar-left, navbar-right and the middle portion.
Do not forget to set top:60px (height of navbar-top) for the left and right divs.
jsFiddle Demo
/* *CSS:* */
div {
position: relative;
box-sizing: border-box;
}
.navbar-top {
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
z-index: 2;
}
.navbar-left {
position: fixed;
width: 20%;
height: 100%;
top: 60px;
left: 0;
z-index: 1;
}
.navbar-right {
position: fixed;
width: 20%;
height: 100%;
top: 60px;
right: 0;
}
.myBody {
width: 60%;
margin: 60px auto 0px;
}
.navbar-top {
background: blue;
}
.navbar-left {
background: red;
}
.navbar-right {
background: green;
}
.navbar-top {
background: wheat;
}
<!-- **HTML:** -->
<div class="navbar-top">navbar-TOP</div>
<div class="navbar-left">navbar-LEFT</div>
<div class="navbar-right">navbar-RIGHT</div>
<div class="myBody"> My body lies over the ocean... hummmmm </div>
Give each a width that will equal to 100%. Give left div 20% div 4 60% and right div 20%. Or, with existing code, give 4th div 100%.
I have a quick rookie-like question. I used to know CSS, but didn't after having not used it in years.....
Anyway,
I'm trying to stack two divs on top of each other. A portion of my code is below.
CSS:
.faq_left {
width: 134px;
height: 495px;
float: left;
background-color:red;
}
.faq_box_top {
width: 279px;
height: 200px;
float: top;
background-color:black;
}
.faq_box_bottom {
width: 279px;
height: 295px;
float: bottom;
background-color:green;
}
.faq_right {
width:783px;
height: 495px;
float: left;
background-color:yellow;
}
HTML
<div class="faq_left"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
<div class="faq_right"></div>
I would like faq_left on the left.
I would like faq_box_top & faq_box_bottom to be in the center, where faq_box_top is above faq_box_bottom.
I would like faq_right on the right.
Attached is my page and style sheet along with an image of what I am trying to achieve.
Thanks in advance,
You should use position instead of float as the values you have given is wrong. My way is, to position them in top, left, bottom and right, with adjusting according to the left or top 50% by giving the offset in negative margins.
Have a look at the below snippet.
.faq_left,
.faq_box_top,
.faq_box_bottom,
.faq_right {
position: absolute;
}
.faq_left {
width: 134px;
height: 495px;
left: 0;
top: 50%;
margin-top: -247px;
background-color:red;
}
.faq_box_top {
width: 279px;
height: 200px;
top: 0;
left: 50%;
margin-left: -139px;
background-color:black;
}
.faq_box_bottom {
width: 279px;
height: 295px;
left: 50%;
margin-left: -139px;
bottom: 0;
background-color:green;
}
.faq_right {
width:783px;
height: 495px;
right: 0;
top: 50%;
margin-top: -247px;
background-color:yellow;
}
<div class="faq_left"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
<div class="faq_right"></div>
This is how it looks in 33% zoom:
View the snippet in Full Page.
float is only: left, right, or none. There isn't a: top or bottom.
Right and left boxes have display: inline-block so that they sit next to each other.
Top and bottom boxes have clear: both so that there is nothing sitting next to them.
Top and bottom boxes have margin: 0 auto so that they are centered.
.faq_left {
width: 134px;
height: 495px;
float: left;
background-color: red;
display: inline-block;
}
.faq_box_top {
width: 279px;
height: 200px;
background-color: black;
clear: both;
margin: 0 auto;
}
.faq_box_bottom {
width: 279px;
height: 295px;
background-color: green;
clear: both;
margin: 0 auto;
}
.faq_right {
width: 783px;
height: 495px;
float: left;
background-color: yellow;
display: inline-block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>33180711</title>
</head>
<body>
<div class="faq_box_top"></div>
<div class="faq_left"></div>
<div class="faq_right"></div>
<div class="faq_box_bottom"></div>
</body>
</html>
The dimensions of the boxes are odd... is this intentional? It's unclear what you wanted with the left and right boxes...did you want them touching or did you want a space between them? If you desire the latter then change the right box to float: right
I wouldn't use absolute positioning since it may easily break your layout. Instead I would wrap the top and bottom divs inside another div, like this:
<div class="faq_left"></div>
<div class="faq_middle">
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
</div>
<div class="faq_right"></div>
And then just change the CSS a little bit:
.faq_left {
width: 134px;
height: 495px;
float: left;
background-color:red;
}
.faq_middle {
width: 279px;
float: left;
}
.faq_box_top {
height: 200px;
background-color:black;
}
.faq_box_bottom {
height: 295px;
background-color:green;
}
.faq_right {
width:134px;
height: 495px;
float: left;
background-color:yellow;
}
You can see it running here: https://jsfiddle.net/u83dpf7t/
two changes:
.faq_right {
width:783px;
height: 495px;
float: right;
background-color:yellow;
}
That should be right instead of left, well?
and re-order:
<div class="faq_left"></div>
<div class="faq_right"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
fiddle here: http://jsfiddle.net/pt8dcc1t/1/
I am trying setup a design where I would like a left bar for navigation and things that remains fixed and doesn't scroll, but have a content box next to it that does scroll as needed. The problem I'm running into, if I position: fixed; the first DIV it technically does what I want, but it overlaps the second DIV. I'm just creating this and using JsFiddle to test easily, so I don't have an actual working code other than this fiddle. I'll admit, I've been awake for about 30 hours now, so if this is a really silly oversight from me, please forgive me. Thanks!
FIDDLE
I tried to write this code and it is responsive too.
* {
padding: 0px;
margin: 0px;
}
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
#two {
box-sizing: border-box;
padding: 20px;
position: absolute;
left: 25%;
right: 0%;
float: right;
width: 75%;
background: #333;
}
I hope this helps.
When you add position:fixed the element is taken out of the flow and its basically functions in respect to the window .
so the following CSS :
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
25% is 25% of the window not 25% of <div id="wrap">(and hence the overlap) , if you take off the position:fixed you'll see no overlap .
with position fixed , you probably want to have some left offset on <div id="two">, you cal experiment with :
margin-left: // DO YOUR MATH.
padding-left: // DO YOUR MATH.
You already have height: 400px; on your over div so specify the height to #one too http://jsfiddle.net/ypL8ypsf/5/
#one {
position:fixed;
width:16%;
background: #666;
height:384px;
}
Hope this will help
This changes in css will solve your problem
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#one {
position: fixed;
width: 25%;
background: #666;
height: 100%;
display:inline-block;
}
#two {
width: 70%;
background: #333;
height: 100%;
display:inline-block;
overflow:hidden;
margin-left:29%;
}
.clear {
clear: both;
}
If you have position :fixed on an element. it can only controlled by the browser window, cannot control by parent div. so if you add width: 25% it fill up 25% of your browser window. not in parent div.
i have 2 solutions,
use javascript. dynamically add width in 'px' and add position:
fixed after
use position: absolute. instead of fixed. ( actually your height is 100% so it doesn't matter your position fixed. )
1nd solution: javascript approach [sample code]:
//remove position:fixed from #one
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var calWidth = $("#one").width(); //get the width
$("#one").css({width:calWidth+'px',position:'fixed'}); //apply to the div
</script>
2nd solution: CSS approach [sample code]
#wrap{
position:relative;
}
#one{
position:absolute;
}
Try overriding your current float and position styles with:
float: left; and
position: relative;
Instead of fixing that DIV, I've float them both to the left and give the second DIV overflow-y scroll property.
Hope this can help you:
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
}
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
overflow:hidden;
}
#two {
float: left;
width: 75%;
background: #333;
height: 100%;
overflow-y: scroll;
}
.clear {
clear: both;
}
If it is not usefull you always can try some framework with default sidebars.
Although you could add some margin to the second div to displace it to the right, I don't think you should use fixed for this.
You should do this:
<div class="div1">This is not moving</div>
<div class="div2"> Loren ipsum...</div>
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.div1{
background: #DDD;
width:40%;
height: 100%;
float: left;
overflow: hidden;
}
.div2{
background: #EEE;
width:60%;
height: 100%;
float: left;
overflow-y:auto;
}
Here is a pen for you: http://codepen.io/vandervals/pen/bdBWJV
I managed to do what you want but by adding more div.
the HTML would be
<div id="wrap">
<div id="testone"><div id="one"></div></div>
<div id="test"><div id="two">Lorem ipsum...
</div></div>
<div class="clear"></div>
and the css then
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#testone{
float: left;
width: 25%;
background: #666;
height: 100%;
}
#one {
position: fixed;
}
#test{
float: right;
width: 75%;
height: 100%;
}
#two {
background: #333;
}
.clear {
clear: both;
}
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result: