I have problem with floating divs.
Current html markup:
<div>
<div style="float: left;">
1
<div style="float: left;">
3
</div>
<div style="float: left;">
4
</div>
<div style="clear: both;" />
</div>
<div style="float: left;">
2
</div>
<div style="clear: both;" />
</div>
Block 2 appears in browsers as a part of Block 1, under Block 3 and 4. What's the problem?
divs are not self-closed tags (such as <br /> and <hr /> and <img />), and closing them in your way, will not close them really!!!
In fact your code should look like this:
<div>
<div style="float: left;">
1
<div style="float: left;">
3
</div>
<div style="float: left;">
4
</div>
<div style="clear: both;"></div>
</div>
<div style="float: left;">
2
</div>
<div style="clear: both;"></div>
</div>
Try closing the div after block 4 this way:
<div style="clear: both;"></div>
Related
I have the following bootstrap code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.
I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?
Try this.
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-9 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is because of the width set.
Try this.
JSFiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="background-color: #ccc">
<img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
CSS
.test-image{
width:100%;
height:auto;
min-width:25px;
}
Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div style="width:75px" class="col-xs-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div style="width: 75px; background-color: #ccc;display:table-cell;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="display:table-cell;vertical-align:middle;">
Right content
</div>
</div></div></div>
Or with css flexboxes like
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="display:flex">
<div style="width: 75px; background-color: #ccc;flex:1;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="flex:1;vertical-align:middle;">
Right content
</div></div></div></div>
I have a problem where I need to be able to scroll on mobile for a specific piece of content.
So I have a row lets say, the left half of it I want to stay as is - the right half of it will need the content in it to overflow and be able to scroll. So that part of the row would extend out past the screen width and the user could scroll the content.
How would I go about this?
Currently I have my rows setup as I need them but anytime I put more content in the right hand side it tries to push it underneath the current content.
Ignore any custom css they just make changes to base padding.
<div class="row">
<div class="row">
<div class="small-6 columns smallpadding-right">
<div class="small-5 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
<div class="small-5 columns font10 nopadding">
Brooks DeWalt D25123K-GB <br />
Remove
</div>
<div class="small-2 columns smallpadding">
<img class="arrows" src="images/arrow_up.png"/>
</a><input class="input-padding" type="text" value="21"/>
<img class="arrows" src="images/arrow_down.png"/></a>
</div>
</div>
<div class="small-6 columns">
<div class="small-6 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
<div class="small-6 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
</div>
</div>
</div>
according to How to enable overflow scrolling within a Semantic Ui Grid? and CSS: series of floated elements without wrapping but rather scrolling horizontally (duplicates??)
You should, if i understand your question well be able to fix your issue with the HTML like that shown beneath:
<div class="row">
<div class="small-6 columns smallpadding-right">
<div class="row">
<div class="small-5 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
<div class="small-5 columns font10 nopadding">
Brooks DeWalt D25123K-GB <br />
Remove
</div>
<div class="small-2 columns smallpadding">
<img class="arrows" src="images/arrow_up.png"/>
</a><input class="input-padding" type="text" value="21"/>
<img class="arrows" src="images/arrow_down.png"/></a>
</div>
</div>
</div>
<div class="small-6 columns">
<div class="row" style="overflow-x:scroll; white-space: nowrap">
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="1">
</div>
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="2">
</div>
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="3">
</div>
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="4">
</div>
</div>
</div>
</div>
Notice the inline styles style="display:inline-block; float: none;" and style="overflow-x:scroll; white-space: nowrap" which can be replace with CSS and classes.
Demo: http://sassmeister.com/gist/9530d90ef425eb805da6
I'm new at bootstrap and trying to place a simple grid of images on the webpage. I'd like borders between the images but NOT the edges of the browser. By default bootstrap puts padding on all 4 sides of the col-md elements.
I cant 'hardcode' the padding since the cells change position when the browser size changes according the responsive design. Is there a way for bootstrap to automatically only add padding to the insides?
HTML
<div class="row">
<div class="col-md-8">
<img src="~/Content/images/saucer.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/metalbranch.jpg" />
</div>
</div>
<div class="row" >
<div class="col-md-4">
<img src="~/Content/images/moon.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/peacockOnWood.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/appleGlass.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="~/Content/images/pianoKeysNecklace.jpg" />
</div>
<div class="col-md-8">
<img src="~/Content/images/treeWithNecklace.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-8">
<img src="~/Content/images/gridOfCorks.jpg" />
</div>
<div class="col-md-4">
<img src="~/Content/images/trees.jpg" />
</div>
</div>
CSS
.col-md-4 img, .col-md-8 img {
width:100%;
margin: 20px 0 0 0;
padding: 0;
}
Have a look here : http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
So it should be something like :
<div class='container'>
<div class='row'>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
I can't seem to find the way to center a container that has a couple of images and a label. Here is the code:
<div class="container">
<div class="row">
<div class="col-sm-1" style="width:88px;padding-left:0px">
<img id="Img1" runat="server" src="images/image1.gif" />
</div>
<div class="col-sm-8" style="height:60px">
<div class="row">
<div class="col-sm-12 BaseColor1" style="text-align:center">
<img id="Img2" runat="server" src="images/image2.gif" />
</div>
</div>
<div class="row" style="background-color:white;color: black;text-align:center">
<div class="col-sm-12" style="vertical-align:central">
<asp:Label Runat="server" Height="26px" ID="lblComp">COMPANY</asp:Label>
</div>
</div>
</div>
</div>
</div>
How do I make the entire container div or the "row" div (below) to center in the browser?
Try adding "margin:0 auto"
<div class="container" style="margin:0 auto">
<div class="row">
<div class="col-sm-1" style="width:88px;padding-left:0px">
<img id="Img1" runat="server" src="images/image1.gif" />
</div>
<div class="col-sm-8" style="height:60px">
<div class="row">
<div class="col-sm-12 BaseColor1" style="text-align:center">
<img id="Img2" runat="server" src="images/image2.gif" />
</div>
</div>
<div class="row" style="background-color:white;color: black;text-align:center">
<div class="col-sm-12" style="vertical-align:central">
<asp:Label Runat="server" Height="26px" ID="lblComp">COMPANY</asp:Label>
</div>
</div>
</div>
</div>
</div>
You can also see this post about using Bootstrap's "offsets"
What i have :
<div id="outerDiv" style="margin: 20px;">
<div id="innerDiv" style="float: left;">
<span>10002</span>
<div class="arrow-up" alt='some text' />
</br>
<div class="arrow-down"/>
</div>
<div><h3>Text</h3></div>
</br>
<span>Some plain text
<br />
</span>
</div>
All elements in outerdiv except span with plain text have to be aligned, and floated to the left, but i cant figure out a way how to do it. if i move something everything else start flying all over the page. What will be the correct way of doing it? Attached a image of what i want to achieve:
use this stracture it can help u
<div id="outerDiv" style="margin: 20px;">
<div id="innerDiv" style="float: left;">
<span style="float:left; margin-top:15px;">10002</span>
<div class=" " style="float:left;">
<div class="arrow-up" alt='some text' /></div>
<div class="arrow-down"/></div>
</div>
<h3 style="float:left;">Text</h3>
<div style="float:none; clear:both"></div>
</div>
</br>
<span>Some plain text</span>
</div>