guys, I'm trying to achieve a layout, where I have a container with 2 cols, however, the right col needs to be positioned to the right of the screen, and not to the right of the container... if that makes sense?
<div class="container">
<div class="row">
<div class="col-lg-6">
this content is inside the container normally
</div>
<div class="col-lg-6">
image will go here, but needs to be positioned to the right of the screen, not to the right of the container
</div>
</div>
</div>
Try putting text in div and then add class mr-0 to it.
This is how you can do it.
Working Example
<div class=".parent">
<div class="child">
image will go here, but needs to be positioned to the right of the screen, not to the right of the container
</div>
<div class="abs">
<div class="container">
<div class="row">
<div class="col-sm-6">
this content is inside the container normallythis content is inside the container normally
</div>
</div>
</div>
</div>
</div>
.parent {
position: relative;
}
.child {
float: right;
width: 50%;
background: red;
}
.abs {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.container {
border: 1px solid green;
}
Related
I'm using Bootstrap 4 to create a row of 2 items within a column where the first item stays all the way to the left in the row and the second item is always centered in the row. I am able to do this with my own CSS. Is there a way to do this only using Bootstrap with no extra CSS?
Here is my CSS:
.float_left {
float:left;
}
.float_center {
float: right;
position: relative;
left: -50%;
text-align: left;
}
.float_center > .child {
position: relative;
left: 50%;
}
My HTML:
<div class="row" >
<div class="col-12" style="z-index:5000;">
<span class="float_left">Left</span>
<div class="float_center">
<span class="child">Center</span>
</div>
</div>
</div>
display:flex; will make the data to sit in single row.
When you assign width of equal size ie 50% and move the text to left, that will sit in the center without extra code.
Flex is good for layout design, so don't worry about responsiveness it will take care of that as well.
.align {
display: flex;
border: 1px solid red;
width: 100%;
}
.float_left,
.float_center {
width: 50%;
text-align: left;
}
<div class="row">
<div class="col-12 align" style="z-index:5000;">
<span class="float_left">Left</span>
<div class="float_center">
<span class="child">Center</span>
</div>
</div>
</div>
why don't you use col? I think this will work.
<div class="row" >
<div class="col-12" style="z-index:5000;">
<div class="row">
<span class="col">Left</span>
<div class="col">
<span class="child">Center</span>
</div>
</div>
</div.
</div>
if you want fixed width for left side custom width
I have a list of elements inside a table-like container with horizontal scrolling. Each element has the same width but might have a different height. I would like each of these elements to have a button in its top-right corner, but I don't want this button to scroll out of view when the elements become too long.
I found this answer that solves the same problem, but for only one item in a scrolling div. It relies on positioning the button relative to the container, which I can't do due to the list of elements.
My current attempt looks like this:
.container {
width: 400px;
position: relative;
overflow-x: auto;
}
.table {
display: table;
}
.row {
/*
If the row isn't relative, all buttons stick to the
container top.
However, the buttons are now also out of view
due to the overflow.
*/
position: relative;
/* Just to make the content overflow */
white-space: nowrap;
/* For a clearer distinction between rows */
padding: 0.5rem;
border-bottom: 1px solid black;
}
.button {
/* The button needs to be in line with the parent row */
top: 0;
right: 0;
position: absolute;
}
<div class="container">
<div class="table">
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">1</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
<br>
This one is however a bit taller than the other items.
</div>
<button class="button">2</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">3</button>
</div>
</div>
</div>
You can solve this using position:sticky
.container {
width: 400px;
position: relative;
overflow-x: auto;
}
.table {
display: table;
}
.row {
position: relative;
white-space: nowrap;
padding: 0.5rem;
border-bottom: 1px solid black;
display:flex;
}
.button {
right: 0;
margin-top:-5px;
position: sticky;
align-self:flex-start;
margin-left:auto;
}
<div class="container">
<div class="table">
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">1</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
<br> This one is however a bit taller than the other items.
</div>
<button class="button">2</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">3</button>
</div>
<div class="row">
<div>
Some content
</div>
<button class="button">4</button>
</div>
</div>
</div>
it will be solved by a position:sticky
Please consider the problem posed by the following code:
<div id='container'>
<div id='topLeft' style='background-color:red;float:left'>Top Left</div>
<div id='topRight' style='background-color:green;float:left;font-size:x-large'>Top Right</div>
<div id='clearDiv' style='clear:both;'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
In a fiddle I've created, this produces the following result:
The problem with this, as far as the page I'm working on is concerned, is that space above the yellow div labelled bottom, caused by the additional height of the green div (Top Right). I want the yellow div to be right up against the bottom of the red div (Top Left), regardless of the height of the green div.
Now, this is easily enough fixed by using positioning, as follows (fiddle here):
<div id='container' style='position:relative'>
<div id='topLeft' style='background-color:red;float:left;width:100px'>Top Left</div>
<div id='topRight' style='background-color:green;float:left;font-size:x-large;position:absolute;left:100px;z-index:-1'>Top Right</div>
<div id='clearDiv' style='clear:both;'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
Which produces the following result:
That's exactly what I want. Unfortunately, because the green Top Right div is now positioned absolutely, I now have to specify its left position to ensure that it still appears to the right of the red (Top Left) div.
In the application I'm writing, I'm having to expend a lot of effort to continually position the equivalent of this green div to the right of the red div, when no effort would be required at all if it didn't have the position:absolute attribute. Without that, it'd just naturally appear after the red div, as it did in the result of the first code sample.
So my question is: Is there a way to achieve the same result as I have with my solution - that is, the top of the yellow div being up against the bottom of the red div - without adding position:absolute to the green div?
Update following Ned Rockson's answer, I should add that explicitly setting the height of any of these divs or a wrapper div isn't possible either.
#container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#topLeft {
background-color: red;
}
#wrapper {
position: relative;
}
#topRight {
background-color: green;
font-size: x-large;
position: absolute;
left: 100%;
top: 0;
width: 5em; /* THIS IS THE ONLY "MANUAL" SETTING */
}
#bottom {
background-color: yellow;
width: 100%;
}
<div id='container'>
<div id='wrapper'>
<div id='topLeft'>
Top Left
</div>
<div id='topRight'>
Top Right
</div>
</div>
<div id='bottom'>
Bottom
</div>
</div>
This solution requires you to "manually" set the width of the topRight element, but heights are automatically handled by the CSS.
You can wrap the top left and top right divs in a div with height set and overflow set to hidden. It's not a very elegant approach because the outer div's height is set, but it works for this particular problem.
<html>
<body>
<div id='container' style='position:relative'>
<div style='overflow:hidden; height:18px'>
<div id='topLeft' style='background-color:red;float:left;width:100px'>Top Left</div>
<div id='topRight' style='background-color:green;float:left;font-size:x-large'>Top Right</div>
</div>
<div id='clearDiv' style='clear:both;'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
</body>
</html>
If you want the upper two DIVs bottom-aligned despite their different height, you can assign them this instead of floats:
#topLeft, #topRight {
display: inline-block;
vertical-align: bottom;
}
Here is the complete code:
#topLeft, #topRight {
display: inline-block;
vertical-align: bottom;
}
<div id='container'>
<div id='topLeft' style='background-color:red;'>Top Left
</div><div id='topRight' style='background-color:green;font-size:x-large'>Top Right</div>
<div id='clearDiv'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
Note that I moved the closing </div> of the .topLeft element into the next line to avoid any spaces and linebreaks in the code.
Alternative solution using flex:
If you need topLeft and topRight to have the same height, you can wrap them in a parent container and assign display: flex to this container:
#wrapTop {
display: flex;
}
<div id='container'>
<div id="wrapTop">
<div id='topLeft' style='background-color:red;'>Top Left</div>
<div id='topRight' style='background-color:green;font-size:x-large'>Top Right</div>
</div> <div id='clearDiv'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
I am having an issue aligning two different elements to where they are parallel horizontally. I am wanting the second grid right_service_wrap to appear on the right side of the page just like the left_service_wrap. I am not sure what I am doing wrong that the float right is appearing below the left_service_wrap.
Anyone have any ideas??
.left_service_wrap {
}
.right_service_wrap {
float: right;
display: inline;
}
.title_left {
margin-left: 20%;
}
.title_right {
}
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
<div class="left_service_wrap">
<div class="title_left">A LIST OF OUR SERVICES</div>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Flooring</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofing</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
</div>
<div class="right_service_wrap">
<div class="title_right">A LIST OF OUR SERVICES</div>
</div>
Set the width of both to 50% and do:
.left_service_wrap {
float:left;
width:50%;
}
.right_service_wrap {
float: left;
width:50%;
}
Working demo here: https://jsfiddle.net/usrce45v/
Consider that your requirement of an extra left margin to be applied to the left container requires you to rearrange the width of both left and right containers. So, for a left-margin of 20% the equation becomes:
whole parent width (100%) minus margin (20%), half the result (40%).
I am not sure if I fully understand your question, but if it is what I think, you have to add float: left to the .left_service_wrap class rule. (and define a width for it that allows the elements in it to be displayed as desired)
Please check this two photos
I don't know how to get ".myDivInTheGrid" in boxed bootstrap div. Any suggestions?
I have something like this...
<div class="fluid-container">
<div class="col-md-6"></div><!-- Div with image -->
<div class="col-md-6">
<div class="myDivInTheGrid"></div>
</div><!-- div with content -->
</div>
I have created a working example with a picture in the div you showed in the picture. I made it for col-md-* but you can do the same for larger grid system. If your screen is small, stretch the browser. Check it out HERE
The code is like this:
HTML:
body
<div class="container-fluid">
.fluid-container
<div class="row">
<div class="col-md-6">
.col-md-6
</div>
<div class="col-md-6">
<div class="row">
.col-md-6
</div>
<img class="row" src="http://s22.postimg.org/8z6hs0mch/Chrysanthemum.jpg"/>
</div>
</div>
</div>
CSS:
body{
background:#8EC34D;
color: white;
}
.container-fluid {
background: #81AD4B;
position: relative;
top: 40px;
padding-bottom: 40px;
}
.col-md-6 {
background:#769C47;
height: 300px;
}
img {
width: 256px;
height: 192px;
}