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>
Related
I'm trying to lay cards next to each other but they are stacking on top of each other.
The height of the cards div is 1.
I have tried changing padding, margin, tried putting height to 100%.
I dont know if my navbar is interfering in some way.
<div className="cards">
<div className="row" style={{ display: "flex" }}>
<div className="col s6 m4">
<div className="card">
<div className="card-image">
<img
src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
alt="restaurant one"
width="500px"
height="200px"
/>
<span className="card-title">Card Title</span>
</div>
<div className="card-content">
<p>
I am a very simple card. I am good at containing small bits of
information. I am convenient because I require little markup
to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
<div className="col s6 m4">
<div className="card">
<div className="card-image">
<img
src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
alt="restaurant one"
width="400px"
height="200px"
/>
<span className="card-title">Card Title</span>
</div>
<div className="card-content">
<p>
I am a very simple card. I am good at containing small bits of
information. I am convenient because I require little markup
to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
</div>
</div>
add position: relative; to your row class styles.
.row {
position: relative;
display: flex;
}
<div className="cards">
<div class="row" style={ display: flex; position: relative;}>
<div className="col s6 m4">
<div className="card">
<div className="card-image">
<img
src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
alt="restaurant one"
width="500px"
height="200px"
/>
<span className="card-title">Card Title</span>
</div>
<div className="card-content">
<p>
I am a very simple card. I am good at containing small bits of
information. I am convenient because I require little markup
to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
<div className="col s6 m4">
<div className="card">
<div className="card-image">
<img
src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
alt="restaurant one"
width="400px"
height="200px"
/>
<span className="card-title">Card Title</span>
</div>
<div className="card-content">
<p>
I am a very simple card. I am good at containing small bits of
information. I am convenient because I require little markup
to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
</div>
</div>
i have made the website mobile responsive.All are done.
This is the website which i made responsive.
alpha.dubaiexporters.com
what is happening is that when its of desktop size,the footer links are clickable but when i resize it to small screen,footer links shows unclickable.
i used the inspect element to know the issue and i found that its because of <div class="clearfix"> . So i removed it from my coding but the problem still persists.I dont have any idea.Even i tried removing .clearfix before and after from bootstrap.cs but its not working.[
i dont know why clearfix div is displaying even after removing it from code.
code:
<div class="footer-wrapper">
<div class="footer-container vc_row wpb_row vc_row-fluid ">
<%-- <img src="//cohhe.com/demo/sky/sky-directory/wp-content/uploads/2015/01/skydirectory-footer-logo.png" class="footer-logo " alt="Sky Directory" />--%>
<div class="footer-content" style="padding-top:60px;">
<div class="footer-links-container columns_count_2">
<div id="first" class="widget-area footer-links vc_col-sm-6 " role="complementary">
<div id="sky-directory-useful-links-20" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
About DubaiExporters
</div>About Us<br />Member Benefits<br />Link Us<br />Media Partners<br />Contact Us<br /><%--<div class="clearfix"></div>--%></div><div id="sky-directory-useful-links-21" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
Information
</div>News<br />Upcoming Exhibitions<br />Advertise<br />Add Your Event<br /><br /><%--<div class="clearfix"></div>--%></div> </div>
<div id="second" class="widget-area footer-links vc_col-sm-6 last" role="complementary">
<div id="sky-directory-contact-us-11" class=" sky-contactus widget widget_sky-directory-contact-us row-fluid">
<div class="contact-us-widget-main">
<div class="contact-us-phone">
<span class="phone-icon fa fa-mobile"></span>
<div class="phone-info-container">
<span class="phone-text">Call us:</span>
<span class="phone-number">+971 4 3050755</span>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-lower">
<div class="contact-us-social">
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-email">
<a href="mailto:info#skydirectory.com" class="email-address">
<span class="email-text">Or send an email to:</span>info#dubaiexporters.com</a>
</div>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<%-- <div class="clearfix"></div>--%>
</div> </div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<%--<div class="scroll-to-top-container">
<div class="scroll-to-top"><span>To Top</span></div>
</div>--%>
<div class="footer-inner">
<div class="footer_info">
<div class="copyright">© 2018, Dubai Exporters</div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<div class="footer-cloud-container">
<%--<img src="http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/bottom-cloud.png" width="266" height="116" alt="Footer cloud"/>--%>
<%-- <div class="clearfix"></div>--%>
</div>
</div>
</div>
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>
How can I wrap a glyphicon and a word together so that the icon is centered over or under the word. For an example:
<div class="row">
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-camera-retro"></i> </p>
<h1>Photography </h1>
</div>
</div>
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-camera"></i> </p>
<h1>Rentals</h1>
<p></center></p>
</div>
</div>
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-star-empty"></i> </p>
<h1>Dance Media</h1>
<p></center></p>
</div>
If I understand your question correctly, you need to put text-align: center; in the div that contains the text and the icon. Check out this example: http://jsfiddle.net/rahjU/11/
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>