I am trying to make static stripes on both sides of a browser where page content flows within. I am using Bootstrap. I have spared one cell on the left and one cell on the right for static content. These cells contain another which goes all along the page but 50% width of the container cell.
My code is as follows :
<div class="col-lg-1 col-md-1 col-sm-1">
<div style="background-image: url(./Content/images/strip_left.jpg); background-repeat: repeat-y; width: 20%; float: left; min-height:100%; position:fixed; top:0px; bottom:0px;"> </div>
</div>
<div class="col-lg-4 col-md-6 col-sm-8 col-lg-offset-3 col-md-offset-2 col-sm-offset-1">
<!-- This is where the page content flows -->
</div>
<div class="col-lg-1 col-md-1 col-sm-1" style="float:right; margin:0px; right:0px; text-align:right;">
<div style="background-image: url(./Content/images/strip_right.jpg); background-repeat: repeat-y; width: 20%; float: right; min-height:100%; position:fixed; top:0px; bottom:0px;"> </div>
</div>
The problem is that I am getting the following :
Left side is OK. But I haven't been able to close the gap on the right. float, margin, padding did not work. How can I fix this issue?
P.S. : Green areas are the leftmost and rightmost divs. Yellow area is the content area. White region is here I set the background image as stripe.
I think you are running into issues using both the float and fixed position.
position: fixed; /* use this only if you want the element fixed positioned in relation to the window */
Here's a simplified fiddle: https://jsfiddle.net/ro5hvwub/2
Is this what you are looking for?
Related
I'm adapting the hero template from bootstrap.
Nested in the hero-unit div I would like to have two divs to be rendered in wide screens, side by side, like:
|text 30% container width||picture the rest of container width|
and in narrow screens (smartphone) stacked:
|text full container width|
|picture full container width|
Any idea?
Use media queries to create different styles for different sized screens.
For the full size screen you could do:
<div id="left" class="cont">
</div>
<div id="right" class="cont">
</div>
CSS:
#left{
float: left;
width: 30%;
}
#right{
overflow: hidden;
}
The above layout will have the left div floating to the left, with a width of 30% and the right div will take up the remainder of the space.
For the mobile screen, your CSS will vary slightly.
<div id="left" class="cont">
</div>
<div id="right" class="cont">
</div>
CSS:
.cont{
width: 100%;
float: left;
clear: both;
/* Margins, padding, etc. */
}
Can't you just use the built in grid system?
<div class="hero-unit">
<div class="row-fluid">
<div class="span3">text</div>
<div class="span9"><img src="img.jpg"></div>
</div>
</div>
I have got the following code working fine on FF. As you can guess, I want the following two divs stays on one line without breaking when browser resize.
<div style="float: left; margin-right: 10px; ">
</div>
<div style="overflow: hidden;">
</div>
But as per usual, when I tested the page with IE 9, the right div was already below the left one.
Can someone pls help me out here, thanks,
Either add "float:right" in your second div or
add "width:XXpx" into your first div.
Wrap it with another div
<div>
<div style="float: left; margin-right: 10px; ">
</div>
<div style="float:right; overflow: hidden;">
</div>
</div>
you also float the other div
<div style="float: left; margin-right: 10px; ">
</div>
<div style="float:right; overflow: hidden;">
</div>
==========================================================>>>
UPDATE
HTML
<div class="marginRight"></div>
<div></div>
CSS
div {
float:left;
border:1px solid red;
width:45%;
height:100px;
}
.marginRight {margin-right: 10px;}
WORKING DEMO
it is working fine
if you want more configuring
<div style="display:table-row;">
<div style="width:49%; margin-right:2%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
<div style="width:49%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
</div>
Use a container div and set the two divs to either % of total width or total px of the page.
#containerdiv {
width:100%;
overflow:hidden;
}
#leftdiv {
width:20%;
overflow:hidden;
float:left;
#rightdiv {
width:80%;
overflow:hidden;
float:left;
}
<div id="containerdiv">
<div id="leftdiv"> TEST </div>
<div id="rightdiv"> TEST </div>
</div>
Remember if you use margins and paddings you will need to adjust the percentages or pixels for it to line up next.
For example. If you add padding 1% to left div, it will push the right div down to second line since you are now at a total of 101% of the container divs width.
I am trying to place 7 divs side by side but with a bit of uniqueness.
You can take a look at what I have done so far through the link HERE and view page source.
I want the Center div's width to fill the space between the Left Middle and Right Middle div irrespective of how far one drags the browser form to the left or right. At the moment the center div has white spaces left and right of it.
Can anyone help me out please?
You can achieve it with <table>. If you are pretending to use div-based structure, then you can simulate divs behaviour by using display:table etc...
here is HTML:
<div style="display:table;width:100%;">
<div style="display:table-row">
<div style="display:table-cell;width:100px;background:blue;">Left Fixed</div>
<div style="display:table-cell;width:auto;background:green;">Left Stretch</div>
<div style="display:table-cell;width:120px;background:yellow;">Left Middle</div>
<div style="display:table-cell;width:auto;background:#999;">Center</div>
<div style="display:table-cell;width:120px;background:yellow;">Right Middle</div>
<div style="display:table-cell;width:auto;background:green;">Right Stretch</div>
<div style="display:table-cell;width:100px;background:blue;">Right Fixed</div>
</div>
</div>
Here is a demo: demo link
Try with display: inline-block and white-space: nowrap.
Demo
Example:
HTML
<div class="parent">
<div class="child">first</div>
<div class="child2">first2</div>
<div class="child3">first3</div>
<div class="child4">first4</div>
<div class="child5">first5</div>
<div class="child6">first6</div>
<div class="child7">first7</div>
</div>
CSS
.parent{
margin:0 auto;
background:red;
font-size:0;
white-space:nowrap;
}
.child, .child1, .child2, .child3, .child4, .child5, .child6, .child7{
display:inline-block;
vertical-align:top;
width:100px;
padding:20px;
font-size:12px;
}
.child{
background:green;
}
.child2{
background:rgba(0,0,0,0.4);
}
.child3{
background:rgba(0,0,0,0.6);
}
.child4{
background:rgba(0,0,0,0.1);
}
.child5{
background:rgba(0,0,0,0.3);
}
.child6{
background:rgba(45,234,0,0.9);
}
.child7{
background:rgba(232,0,222,0.9);
}
LIve demo
Your left div has a width of 45%; your right div similarly. But the middle div has a width of 8%, so there's 2% left over.
If you make the centre div have a width of 10%, the gaps disappear.
<div style="position: relative;">
<div style="margin-left: auto; margin-right: auto; width: 10%; margin-top: 0px; background-color: #999">
Center</div>
</div>
since you had the two divs width's add up to 90% and the center div as 8%, fix this and the center this fills up the center
You can achieve this without any problem using HTML <table>. Or if you want to have it table-less, by using only div-based structure, then you can simulate table's behavior with display as table, table-row, table-cell in your CSS
Here is a Live Demo.
I have a two column layout, using a container and a div called "left" and a div called "Right". How do I make sure that the div#right is only 500px, but div#left is as big as the user's browser will allow ...?
Here's what I have now:
<div id="container">
<div id="left" style="float:left"> </div>
<div id="right" style="float: right; width: 500px"> </div>
</div>
Don't float the left div to the left. If you leave it "unfloated", then it will be the main content and automatically fill the available space.
You can do it by unfloating the #left div and giving it a padding-left that equals the #right div's width (this makes room for the right div). Finally, you'd need to swap the source order of both div's.
<div id="container">
<div id="right" style="float: right; width: 100px; "> </div>
<div id="left" style="padding-right: 100px; "> </div>
</div>
You can see it in action here.
Change style of you left div to:
<div id="left" style="margin-right:500px"></div>
This will make sure that content won't flow under the right floating div when content in the left one takes more vertical space than content in the right one.
Important
Don't forget to put the floated div in front of the unfloated one. So put your right one first in the markup and then the left one.
Solution to your particular problem
So you have two div elements
<div id="endants-content">
<div id="screenshot-preview">...</div>
<div id="endants-main-content">...</div>
</div>
And CSS should be like this to make it work as expected:
div#endants-content
{
/* put min-width here is you need it */
}
div#screenshot-preview
{
float:right;
width:30%;
}
div#endants-main-content
{
margin-right:30%;
overflow:auto;
}
I have created a small form which has four corners (used for rounded corners)... i wanted to be able to set the width to AUTO for Upper-Center so that it would take the maximum hence total width is 500px (see below) "minus" 12px for each corner ... but it just collapses - the auto doesn't seem to work.. anyway around this or do i need to enter a manual figure?
I wanted to be able to control the size by the container div called contact-form..... hence wanting to use AUTO... otherwise i have to update the sizes in more than one place..
#contact-form
{
width:500px;
float:left;
}
#corner-upper-left
{
background-image: url('../images/uppleft.gif');
background-repeat: no-repeat;
float:left;
width:12px;
}
#upper-center
{
float:left;
background-color: #F04A23; /* Red */
width:auto;
}
#corner-upper-right
{
background-image: url('../images/uppright.gif');
background-repeat: no-repeat;
float:left;
width:12px;
}
UPDATE FOR HTML
<div id="contact-form">
<div id="corner-upper-left">
</div>
<div id="upper-center">
</div>
<div id="corner-upper-right">
</div>
<div id="center-section">
</div>
<div id="corner-bottom-left">
</div>
<div id="bottom-center">
</div>
<div id="corner-bottom-right">
</div>
</div>
Try width: 100%, it should fit inside its container. For an actual test please post your html too :)