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;
}
Related
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?
I am working on a grid layout using css flex styling and want a total css solution, if possible, I have the means to fix it with javascript.
When a row exceeds the viewport width, it displays the scrollbar,
but when you scroll, the styling of the row element remains the size of the viewport,
it does not seem to "wrap" all of its children.
see : fiddle
Try scrolling, you will see the yellow row (.sk_row) class does not appear around all its children.
A solution would be fine, but I would like to know why the parent does not visually contain all children. I think I may be missing some key concept about flexboxes...
Duplicate of fiddle code...
<body>
<div id='pg_wrap'>
<div id='frm0'>
<div class='sk_scrl'>
<div class='sk_row'>
<div class='itm_val'>row 1</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
<div class='sk_row'>
<div class='itm_val'>row 2</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
</div>
</div>
</div>
#frm0{ width:420px;height:200px}
.sk_scrl{ overflow:auto;display:flex;flex-flow:column;align-content:stretch}
.sk_row{
display:flex;
justify-content:flex-start;
align-items:center;
background:#ff0;border:2px #f00 solid;
height:50px}
.itm_val{
display:flex;
border:1px #000 solid;background:#666;
flex:0 0 100px; height:30px; margin:0 5px;
align-items:center;justify-content:center}
Note : this is not the same as question
That op wants to change child behaviour, I want the parent to change.
It's not working the way you want because .sk_row inherits the width, in this case from #frm0:
#frm0 { width: 420px; }
With the class .sk_scrl you can't see it very well, because it's set to:
.sk_scrl { overflow: auto; }
If you use your browsers developer tools (assuming you have any), you'll see that the elements wrapped around your .itm_val divs are all 420 pixel wide. The reason the .itm_val divs are all visible outside of their container, is because they are "overflowing" out of their containing div.
Here's an example for how the width-inheriting-thing works:
<div class="container">
<div class="element"></div>
</div>
If you set the the width of .container to 50%, it will use up half of the available width within the window. If, however, you want .element to take up the full width of the window, you will have to adjust the width like this:
.element {
width: 200%;
}
If it were set to 100%, it would only be as wide as .container.
Here's a fiddle: http://jsfiddle.net/Niffler/n8hmpv13/
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 m trying to align a div which is at the bottom of all the divs.
last div is floating div and align by css to top.
I don't know how to align it from the left hand side without any problem of the screen resolution change. If possible please tell me if I can give one div's id whose position is always fixed and left distance from that div with the help of css.
<div id='fixeddiv'>this div is at the top</div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div id='bottom_div'>this div is floating</div>
Thanks
Well, if I understand you correctly and you want to give one left-alignment to the top and bottom divs and another to the rest of the divs, use classes:
<div id='fixeddiv' class='header-and-footer'>this div is at the top</div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div id='bottom_div' class='header-and-footer'>this div is floating</div>
css:
.header-and-footer {
margin-left: 50px;
}
.other-content {
margin-left: 10px;
}
or:
div {
margin-left: 10px;
}
div.header-and-footer {
margin-left: 50px;
}
user jquery offset
http://api.jquery.com/offset/
and then
var offsetval=$('#relativediv').offset()
$('#bottom_div').css('left',offsetval.left);// change left value the way you want
I'm having an issue aligning three divs inside a parent div, the effect I need is the following
|IMAGE| +TEXT+ |IMAGE|
Each div contains an Image (2) and the text (1) respectively. Aligning them is easy, the problem is that I want the CENTER div to auto width to the size of the browsers' window and keep the other IMAGE divs always on the right and left side respectively.
Something like this for example, if the user maximizes the window:
|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|
As you can see, the idea is that the center div grows, and auto width but keeping the structure.
How could I get that behaviour? Thanks in advance.
#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }
If that still doesn't behave how you want, please give more detailed requirements.
Here is another inline implementation for three images side by side:
<div style="text-align:center">
<div style="float: left"><img src="image1.png"/></div>
<div style="display: inline"><img src="image2.png"/></div>
<div style="float: right"><img src="image3.png"/></div>
</div>
This works rather well as well.
.container{width: 100%; padding: 5px;}
.fig-left {float: left;}
.text {float: left;}
.fig-right{float: right;}
/* add margins maybe */
.text, .fig-right, p{margin: .75em;}
and HTML https://codepen.io/tradesouthwest/pen/MWELwGN to test
<div class="container">
<div class="fig-left">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
<div class="text">
<p>ABCDEFGHIJKLMNOP don't forget the alt in images QRSTUVWXYZ</p>
</div>
<div class="fig-right">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
</div>