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)
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 three divs, all inline under a parent div. And my goal is to make middle div ALWAYS in the centre of the parent div. While rest two side divs are responsive. In left hand side div, text is align to right while in left hand side div, its aligned to left. And middle div's width is fixed, say 80px. Parent div's max and min width are also set. I have this:
<div style="max-width: 500px;min-width:450px;">
<div style="display:inline-block;text-align:right;">Posted by</div>
<div style="display:inline-block;text-align:center;width:80px;">
<img src="default.png" style="width:80px;height:20px;border:2px solid #fff;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;">
</div>
<div style="display:inline-block;">Johnathan Bestualzaukazoa</div>
</div>
I want to have something like this:
But middle div is not always in center. As side divs content push them.So how can I achieve it?
I suggest to use this CSS table layout for it. I set 50% on both left and right sides, and middle one with an image. Because it's table layout it won't break, instead it will re-calculate the value of 50% and display the best width "(100% - image width) / 2" available automatically.
jsfiddle
.container {
display: table;
border: 2px solid grey;
margin: 20px auto;
}
.container > div {
display: table-cell;
}
.left, .right {
width: 50%;
padding: 0 10px;
}
.left {
text-align: right;
}
.middle img {
vertical-align: middle;
}
.right {
text-align: left;
}
.container1 { width: 500px; }
.container2 { width: 400px; }
.container3 { width: 300px; }
<div class="container container1">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container2">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container3">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
I have a main div with 2 divs inside it, and a secondary div. To get the divs inside the main to be in the poisition i wanted them to be i set position to relative and it worked but the secondary div is now above the main div(in the browser) for some reason. I probably used position wrong, if someone can correct my it will help me a lot.
#main {
position: relative;
}
#right {
float: right;
position: relative;
display: inline-block;
}
#left {
float: left;
position: relative;
displayLinline-block;
}
#subDiv {
position: relative;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
browser shows:
<div id="subDiv">
</div>
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
what's my mistake?
You need to wrap a clearfix around the 2 floating divs. Also, display inline-block is used instead of floating, not in additon too. You also have a typo in your css "displayLinline-block;" but that could just be your example.
You can make a new class like such:
.cf:after { visibility:hidden; display:block; content:"" ; clear:both; height:0px;}
and then wrap all your floated elements in a classed called "cf" and this will fix your issue.
<div class="cf">
<div class="fleft"> this is a div floating left </div>
<div class="fright"> this is a div floating right </div>
</div> <!-- //clearfix -->
<div> another div with more content that is not interferred with content above. </div>
It's not entirely clear what look you are trying to achieve but it sounds as though you need to clear the floats.
There are multiple methods of clearing which are detailed in THIS Stack Overflow question
#left,
#right,
#subDiv {
height: 50px;
}
#left {
float: left;
width: 50%;
background: red;
}
#right {
float: left;
width: 50%;
background: blue;
}
#subDiv {
background: green;
clear: both;
}
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="subDiv">
</div>
Clear divs of floats. Also, be careful that you have a typo in the CSS. "displayLinline-block".
I would like to achieve something that initialy looked simple to me but turned out to be not.
My code is:
<html>
<head>
<style>
div {
border-top: 1px solid black;
margin: 10px;
}
div#all {
border: 0;
}
</style>
<body>
<div id=all>
<div class=first>First</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=rowstarter>Row Starter</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
<div class=content>Content</div>
</div>
</body>
</html>
What I'd like to get is all DIVs in "content" class are inline-blocks (or floats) set one after another from left to right.
The "rowstarter" class is the same but has to clear the before floats (start a new row).
The "first" DIV has to have a width equal to the content below (so if the window width allows the browser to display 5 "content" DIVs in a row, each having 100px width then "first" has 5 * 100px + 5 * (2 * 10px [margins]) = 600px if 6 "content" DIVs then "first" has 720px width...).
Is this possible without using Javascript, only with CSS?
As the number of content divs is going to be dynamic, you will need to use javascript in order to achieve what you want. There is no css that will allow you to do calculations to work out a percentage width based on number of child elements.
The alternative to javascript would be if you knew how many divs are in each row while you are generating your html, you can add inline styles for the widths
Here are some examples
Pure css (needs html layout change)
jQuery
I have posted a fiddle which I believe answers your question.
First, you have to give #all and each child div, except for .first, a left float:
#all,
#all div {
float: left;
}
#all .first {
float: none;
}
Then, clear .rowstarter on the left.
#all .rowstarter {
clear:left;
}
You actually don't need the "content" class at all (and I would recommend removing it, as it clutters the code and adds to the page weight).
Edit: If you add a .rowstarter div in front of the .first div, .rowstarter has to have a fixed width and the left margin of .first needs to increase by the sum of the width and margins of .rowstarter.
#all .rowstarter {
width: 100px; // arbitrary fixed width
margin: 10px; // you've given all divs inside #all this margin, just restating for emphasis
}
#all .rowstarter + .first {
margin-left: 130px; // width of .rowstarter, plus its left and right margins and .first's original 10px left margin
}
To achieve the centering of div#all you have to add a wrapper around it, then apply the following css trick:
.wrapper {
position: absolute;
left: 50%;
}
#all {
position: relative;
left: -50%;
}
I have set up a jsFiddle that probably answers your question. It now also contains the width but the added code is without any width so you are free to use what you want now
http://jsfiddle.net/agtFw/3
The HTML:
<div id="all">
<div class="first">First</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content rowstarter">Row Starter</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
it is no problem to give 2 or more classes to a div and it helps you a lot sometimes!
and the css:
div {
border-top: 1px solid black;
margin: 10px;
}
div.content
{
float:left;
}
div.rowstarter
{
clear:left;
}
div#all {
border: 0;
}
I didn't find something good that helps me so I'm asking a question, sorry if there is any answer lying around somewhere already
I want an html page wiht a header, left div for a menu, and in the middle (where you usually have 1 content div) - 4 divs for 4 graphs, and I want them to be aligned:
menu div | 1 2
| 3 4
I couldn't do that with float left, because number 3 doesn't stick to the menu, but to the left of the page...
any thoughts? (besides making everything super fixed, which is a solution I don't like)
HTML
<div id="menu">Menu</div>
<div id="content">
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
<div id="d4">4</div>
</div>
CSS
#menu {
float: left;
width: 20%;
}
#content {
float: right;
width: 80%;
}
#d1, #d2, #d3, #d4 {
width: 50%;
}
#d1, #d3 {
float: left;
}
#d2, #d4 {
float: right;
}
See this fiddle.
Note You might want to give the 4 divs equal height depending on your content.
#d1, #d2, #d3, #d4 {
width: 50%;
height: ...
}
A variation on melhosseiny's answer.
The blocks will automatically compensate for different heights
fiddle
Markup
<div id="menu">Menu</div>
<div id="content">
<div class="content-block">
first block<br />
second line<br />
third line<br />
</div>
<div class="content-block">
second block
</div>
<div class="content-block">
third block
</div>
<div class="content-block">
fourth block
</div>
</div>
CSS
#menu {
float: left;
width: 200px;
background: #ccc;
}
#content {
margin-left: 200px;
/* for the benefit of ie6 double margin bug */
zoom: 1;
}
.content-block {
background: #efefef;
float: left;
width: 50%
}
/* every second block clears starting at block 3 */
.content-block:nth-child(2n+3) {
clear: left;
}
The details of your question are a bit vague, but perhaps a margin-left on item 3 equal to the width of your menu div would allow your float-strategy to work.
If you post your actual code, your question will afford more helpful responses.
If You don't want anything to be fixed, than probably this is the way to go :
<div> <!-- upper content -->
<div style="float:left">1</div>
<div style="float:left">2</div>
</div>
<div> <!-- lower content -->
<div style="float:left">3</div>
<div style="float:left">4</div>
</div>