I have two columns, floated left and right, like so:
<div style="float: left;">
text1
</div>
<div style="float: right;">
text 2
</div>
but how can i move the right column a little bit to the LEFT? with 'padding'? how to?
or if i use this, how can i move the column on the right it a little bit to the RIGHT?
<div style="float: left;">
text1
</div>
<div style="float: left;">
text 2
</div>
You can change the css style to do it try the following
<div style="float: left; position: relative; left: 30px">
This changes the positioning to relative and then you move the box based on what it's original position was.
You can try this instead:
<div style="float:left; padding-right:-30px;">
or
<div style="float:left; padding-right:30px;">
Hope it helps!
Related
I have got a very annoying problem with bootstrap. I need to divide the page into two parts, left side is my pic and right side is specification. I thought I can simply use row and col, so I have done this:
<div class="layoutProb">
<div class="container" style="width: 1920px;">
<div class="row" >
<div class="col-sm-7" >
<img src="../assets/Img/Beer.jpg" alt="..." class="pic"/>
</div>
<div class="col-sm-5" style="width: 600px;">
<table id="cart" class="table table-hover table-condensed" >
<thead>
<tr>
<th ><h1> The first <br>Tshirt>Here</span></h1></th>
</tr>
</div>
</div>
</div>
</div>
Here is my layout class:
.layoutProb {
top: 0px;
left: 0px;
width: 1920px;
height: 1080px;
}
I have attached the screen here to show what I mean. The gap between is too much. If I use float left then when I decrease the size of the page then the left side overflows, another problem is horizontal scroll and I want to get rid of it as well.
add a class when you need to remove spaces use it
.p-0{
padding-right:0;
padding-left:0;
}
in HTML write this class
<div class="row">
<div class="col-md-2 p-0">
//stuff here for this column
</div>
<div class="col-md-10 p-0">
//stuff here for columns
</div>
</div>
Also, you can use this method
Simple add .no-gutter class on row.
https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works
I am trying to create two columns of equal width, the left one containing text and the right one containing an image. I would like the image to resize down to the width of the column if the image width is greater than the column width, but would like the image to keep its original size if the image is less than the column width. I have tried the instructions in this question, but the image, if larger, will consume whatever space it needs, squishing the column on the left containing text. I am wondering if this has to do with how "table-cell" divs behave, or if it is a precedence issue where the browser will accommodate an image before text. My code looks something like this:
<div style="display: table; width:100%;">
<div style="display: table-row;">
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<h1>Header</h1>
<p>Description</p>
</div>
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<img style="max-width: 100%;height:auto;" src="image.jpg">
</div>
</div>
</div>
Also, I am using FireFox as my browser to test. Thanks!
EDIT: I also tried an alternative method to get the same effect using float divs (code below). The problem is I would like the two columns middle-centered, and I cannot get the smaller float div to size to full height in the parent container, so the inner contents are top-aligned. However, the image does resize properly, which backs up my hunch that this problem is related to how "table-cell" divs behave.
<div style="position: relative;">
<div style="float: left; width: 50%;height:100%;background-color:#F00;">
<div style="display: table;height:100%;width:100%;">
<div style="display: table-row;height:100%;width:100%;">
<div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
<p>content</p>
</div>
</div>
</div>
</div>
<div style="float: left; width: 50%;height:100%;background-color:#F00;">
<div style="display: table;height:100%;width:100%;">
<div style="display: table-row;height:100%;width:100%;">
<div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
<img style="max-width:100%;height:auto;" src="image.jpg">
</div>
</div>
</div>
</div>
</div>
Code was working fine in Chrome. This seems to be an issue only in Firefox as per this article:
http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/
Adding table-layout:fixed; to the div styled display:table; gives the results you're looking for- allowing the image max-width to work and respecting the cell widths.
<div style="display: table; width:100%; table-layout: fixed">
<div style="display: table-row;">
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<h1>Header</h1>
<p>Description</p>
</div>
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<img style="max-width: 100%;height:auto;" src="image.png">
</div>
</div>
</div>
I'm trying to put a bunch of divs inside another one, and do something like the way table columns will resize to fit the space available, but in this case if the divs inside get shrunk to a minimum size they will wrap instead.
I have something like
<div style="width: 100%">
<div style="float: left; min-width:30px; padding: 4px">Text 1</div>
<div style="float: left; min-width:30px; padding: 4px">Text 2</div>
<div style="float: left; min-width:30px; padding: 4px">Text 3</div>
<div style="float: left; min-width:30px; padding: 4px">Text 4</div>
<div style="float: left; min-width:30px; padding: 4px">Text 5</div>
</div>
and that does the wrapping correctly, but there doesn't seem to make the inner ones expand when there is room to fit them all on one line. Can this be done now (keeping in mind I have to support browser that don't implement FlexBox yet)?
I am not sure if this is exactly what you want, but you may want to set a percentage based width for the innner elements.
.cell {
width:19%;
}
with your HTML like this:
<div style="width: 100%">
<div class="cell" style="float: left; min-width:30px; padding: 4px">Text 1</div>
...
</div>
Here is a working example
I have the following:
<footer id="contentinfo" class="footer">
<div class="networking_wrapper">
<div style="float: left;"><img src="#Url.Content("~/Content/Images/twitter.png")"/></div>
<div style="float: left;"><img src="#Url.Content("~/Content/Images/flicker.png")"/></div>
<div style="float: left;"><img src="#Url.Content("~/Content/Images/facebook.png")"/></div>
<div style="float: left;"><img src="#Url.Content("~/Content/Images/blog.png")"/></div>
</div>
</footer>
How can I make .networking_wrapper to be centered on #contentinfo (which is a width 100% of the view because, as you can see, is the footer of the page).
Resolved!
Just had to add text-align:center; to the <footer>
and set .networking_wrapper display: inline-block.
Hope it helps someone =)
I'm looking for the best way to create a block of left-aligned text and a block of right aligned text inside a div.
This is an image of what I want it to look like
I've thought about creating three divs with one in the middle acting as a buffer, but it doesn't seem to work. I'd need to hard code the length of the middle div, and this doesn't seem like the best approach
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: left; width: 100%" > </div>
<div style="float: left;">right aligned text </div>
</div>
Why not use the "text-align" property on the second div?
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: right; text-align: right;">right aligned text </div>
</div>
EDIT: You don't need a middle DIV for a spacing. You can simple use a percentage width for the two other DIVs and using float left and right you have a "buffer":
<div style="width: 500px;">
<div style="float: left; width: 45%;">left aligned text</div>
<div style="float: right; text-align: right; width: 45%;">right aligned text </div>
</div>
try this -
<div style="width: 500px;">
<div style="float:left">left aligned text</div>
<div style="text-align: right;">right aligned text </div>
</div>