I am using bootstrap to develop a responsive site.
I have two containers that have content which I don't want to break onto new lines if the window is resized.
I currently have this fiddle which demonstrates.
I thought using clearfix on the parent container for each news item would work. But the text is breaking from the image on resize.
You can see this in this image
Any clues?
This is the basic css (although it's all in the fiddle):
/* News items */
.news-item {
padding:10px 0 10px 10px;
}
.news-item p {
padding:0;
margin:0;
}
.news-item img,
.news-item-text {
float:left;
}
.news-item-text {
padding:0 0 0 5px;
}
.news-heading {
font-size:18px;
}
.news-tags {
font-family:ffs-italic;
font-size:12px;
}
This is the top of the html:
<div class="row"><!-- breaking and buzzing -->
<div class="span4"><!-- breaking news -->
<h2>Breaking</h2>
<div id="breakingNews" class="rounded clearfix">
<div class="news-item clearfix">
<a href="">
<img src="img/news/sm/sq01.jpg" width="54" height="54" />
</a>
<div class="news-item-text">
<p class="news-heading">Omni Scents to launch...</p>
<p class="news-subheading">At vero eos fragrance line inspired</p>
<p class="news-tags">BEAUTY, PRODUCTS</p>
</div>
</div>
<div class="news-item clearfix">
<a href="">
<img src="img/news/sm/sq02.jpg" width="54" height="54" />
</a>
<div class="news-item-text">
<p class="news-heading">IFF finishes year strong...</p>
<p class="news-subheading">Lorem ipsum in dolor contratis</p>
<p class="news-tags">INDUSTRY</p>
</div>
</div>
You in those cases you need to float your divs and also specify a width for the div, like this:
.news-item {
padding: 10px 0 10px 10px;
float: left;
width: 220px;
}
Also you need to determine the width of each <p>inside the divs, like this:
.news-item-text {
padding: 0 0 0 5px;
width: 160px;
}
For responsive layout, you need to use the tag #mediato set each width again, like:
#media (max-width: 767px) {
.news-item {
padding: 10px 0 10px 10px;
float: left;
width: 160px;
}
.news-item-text {
padding: 0 0 0 5px;
width: 100px;
}
}
I hope it works!
.news-item a
{
display: block;
float: left
}
.news-item-text
{
float: right;
width: 75%; /* adjust this to fit */
}
Related
I am building a website using wordpress theme. I have two elements (one floated left, second floated right) in the footer. I need to make it centered (the second one below the first one) when I resize the browser window. I tried giving the <p> and <div> tag a class and then style it to float:none; - hovewer you cann check that It didn't really work on the webpage. I also attach a picture of how I want it to be..
WEBPAGE
<div class="site-info">
<div style="margin:0 auto; width: 75%;">
<p style="float:left;">© Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
<div style="float:right;">Naleznete nás na sociálních sítích:
<a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a>
<a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a>
</div>
<div class="clear"></div>
</div>
</div><!-- .site-info -->
Here is updated code. with a screen less than 600px, the divs will go on top of each other. This probably will need tweaking to fit on your site.
#left {
float: left;
}
#right {
float: right;
}
#center {
text-align: center;
}
#container {
margin-left: 12.5%;
margin-right: 12.5%;
}
.imagefloat {
display: block;
float: right;
margin: -4px 5px 0 5px;
}
#media (max-width: 600px) {
.nofloat {
width: 100%!important;
text-align: center;
float: none!important;
}
.imagefloat {
float: none!important;
}
}
<div class="site-info">
<div id="container">
<div id="left" class="nofloat">© Copyright
<?=d ate( 'Y'); ?>Hotel Švýcarský Dům</div>
<div id="right" class="nofloat">
<a class="imagefloat" href="">
<img src="/wp-content/themes/adamos/images/gplus.png" />
</a>
<a class="imagefloat" href="">
<img src="/wp-content/themes/adamos/images/facebook.png" />
</a>
</div>
<div id="center">Naleznete nás na sociálních sítích:</div>
<div class="clear"></div>
</div>
</div>
Perhaps add align-text:center to one of the divs and a p tag to put the images on a new line
<div class="site-info">
<div style="text-align:center; width: 75%;">
<p >© Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
<div >Naleznete nás na sociálních sítích:
<p><img src="/wp-content/themes/adamos/images/gplus.png" />
<img src="/wp-content/themes/adamos/images/facebook.png" />
</div>
<div class="clear"></div>
</div>
</div>
Firstly, you kept your float:left and float:right as inline styling so you will need to move the left and right float to an external css as you can't override inline styling with just css.
Secondly, Add a separate class for the left and right, say class="float-left" and class="float-right" and then use media query to switch properties for the classes like this:
#media (max-width: 768px) {
.float-left {
float: none;
}
.float-right {
float: none;
}
}
#media (min-width: 769px) {
.float-left {
float: left;
}
.float-right {
float: right;
}
}
Thirdly, to center the footer text on smaller screens, just add text-align: center to the above media query like this:
#media (max-width: 768px) {
.site-info {
text-align: center;
}
.float-left {
float: none;
}
.float-right {
float: none;
}
}
Lastly, add the icons and text within a <p></p> tag so they will line-break accordingly.
What's the best way to align my arrow graphic in the middle and also touching the bottom of the bar above?
Right now it's aligned to the left and there is space between the top bar and the arrow.
See my jsfiddle: http://jsfiddle.net/huskydawgs/Z7dZR/26/
Here's my HTML
<!-- Start Form -->
<div class="wrapper-twocol">
<div class="twocol_row">
<div class="twocol_cell1">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
<div class="twocol_cell2">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
</div>
<!-- End Form -->
Here's my CSS:
/* 2 Column */
.wrapper-twocol {
position:relative;
width:100%;
border: none;
margin: 20px 0 37px 0;
}
.twocol_row {
height:100%;
white-space:nowrap;
}
.twocol_cell1, .twocol_cell2 {
height:100%;
width:47%;
display:inline-block;
white-space:normal;
vertical-align: top;
margin-left: 6%;
}
.twocol_cell1{
margin-left: 0;
}
.form-header {
background:#939598;
margin:0;
padding: 10px 0 10px 0;
color: #fff;
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
font-size: 21px;
text-align: center;
}
.form-arrow {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
Change you styling slightly. Your div is the entire width of it's parent so you just need to center align that divs contents.
DEMO http://jsfiddle.net/Z7dZR/27/
.form-arrow {
margin: 0 auto;
text-align: center;
margin-top: -2px;
}
I'd suggest the following solution.
First, wrap arrows within a wrapper-div:
<div class="wrapper arrowWrapper">
<div class="form-arrow">
<img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12">
</div>
</div>
Second, apply following CSS:
.arrowWrapper {
width:209px; /*It's the width of the buttons calculated by the developer tools*/
}
.form-arrow {
margin:-3px auto 0 auto;
width:11px; /*width of the arrow*/
}
You can do it with css only (removing the arrow image and its wrappers from the markup)
using the ::after selector. That's how you will prevent repeating of the tag and the wrappers.
.form-header::after{
content: url('https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif');
position: absolute;
left: 50%;
bottom:-18px;
}
Here is the Demo: http://jsfiddle.net/7H5ea/1/
I have a header/ container with no specified width (therefore it's as long as the parent). Inside that, I have two smaller divs. Now, the first one should only contain a picture (with a set size), and the other should be as big as there's space left. I can't use a set width, because I don't know the width of the header.
How do I do this with pure CSS?
What I want ultimately is a picture, then some text aligned to the right top, and then some text aligned with the bottom of the picture on the left.
Do you know of any better way to do this?
Here's a picture so it's easier to understand:
Thanks, Aleksander
EDIT 1:
HTML:
<div class="header">
<div class="header_left">
<div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
</div>
<div class="header_right">
<div class="time">18m ago</div>
<div class="name">Volkswagen</div>
</div>
</div>
CSS:
.header {
}
.header_left {
display: inline-block;
}
.pic {
margin: 5px;
}
.header_right {
display: inline-block;
}
.time {
margin: 5px;
float: right;
}
.name {
margin: 5px;
float:left;
}
It's kinda' messy right now, because what I've just been trying a lot of stuff, and this is the last thing.
It would be easier if you displayed your html. Here's an example based on your description. You can see this working in the fiddle here
http://jsfiddle.net/Z68ds/18/
.header {
overflow:hidden;
padding: 4px;
background: #ddd;
}
.caption {
float: right;
font-size: 0.9em;
}
.avatar {
float: left;
}
.title {
margin: 14px 0 0 38px;
}
<div class="header">
<div class="caption">
texty text2
</div>
<img class="avatar" src="http://i.stack.imgur.com/5dv0i.jpg?s=32&g=1" />
<div class="title">texty text1</div>
</div>
You have to use overflow in the element you don't want to set a width without floating it.
#left {
float: left;
width: 100px;
}
#right {
overflow: hidden;
}
This will force the #right element to cover the rest of its parent. No extra markup needed.
Is this what you want to achive?
<div id="header">
<img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
<p id="textRight">texty text2</p>
<p id="textLeft">texty text1</p>
<div class="clearer"></div>
</div>
/* CSS */
#logo {
float: left;
}
#textRight {
float: right;
}
#textLeft {
clear: right;
float: left;
}
.clearer {
clear: both;
}
Here is a fiddle:
http://jsfiddle.net/T26cD/
I’m updating some legacy code on an old website, and the CSS is a nightmare. All I want to do is make the div that holds a username expand a bit when needed, and keep the outer div centered (horizontally) on the page. The myLabel control is populated based on a user’s name (it typically isn’t pre-defined as John Doe).
Currently, between the 800px value on myContainer, and the 350px value on myGridB, longer usernames are wrapping inside of the div. I’d rather display the long names on one line and, when possible, not bump the other controls to the next line.
I’ve tried using min-width on myContainer and myGridB , but that just allows the divs to expand across the whole page. I see this is common behavior for divs in this question.
I also tried some of the methods in this other question, but that pushed my header content to the left, and I need it centered.
I realize this code is a garbled mess, but I appreciate any ideas…
aspx:
<div class="myLogo1">
<div class="myContainer" style="width: 800px">
<div class="myGridC myLogo2 first">
<a onclick="loadMyHomePage(); "><img src="myImageAddress" /></a>
</div>
<div class="myGridB first last">
<div class="myHome myGridB first last">
<asp:Label runat="server" CssClass="myHome" ID="myLabel">
John Doe
</asp:Label>
<span class="myHome">
<asp:HyperLink NavigateUrl="mySettingsPage.aspx" runat="server">
My Settings
</asp:HyperLink>
</span>
<a href="myLogoutPage.aspx") %>">
<img src="myLogout.jpg") %>" alt="Logout" />
</a>
</div>
<div class="myGridB first last">
<div class="myGridA myPaddingA myHome">
<a href="myOtherPage" target="_blank">
<img width="180px" height="72px" src="myOther.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
css:
.myLogo1
{
background-color: #363636; /* #000000; */
width: 100%;
height: 125px;
}
.myContainer
{
margin-left: auto;
margin-right: auto;
width: 960px;
}
.myGridA, .myGridB, .myGridC {
display: inline;
float: left;
margin-left: 5px;
margin-right: 5px;
}
.myGridA
{
width: 190px;
}
.myGridB
{
width: 350px;
}
.myGridC
{
width: 390px;
}
.myLogo2
{
border: none 0px transparent;
padding-top: 10px;
}
.first
{
margin-left: 0;
}
.last
{
margin-right: 0;
}
.myHome
{
text-align: right;
display: block;
vertical-align: top;
float: right;
position: relative;
font-size: 9pt;
}
.myHome span
{
font-size: 9pt;
float: left;
padding: 3px 5px 0px 0px;
}
.myContainer .myPaddingA
{
padding-left: 44px;
}
If it's ideas, how I usually horizontally center my divs is I set the container to a certain % width. then i use margin: auto; hope that helped.
Currently have a problem with some DIVs overlapping their containing DIVs. See image below (the 3 products at the bottom):
All the body content of the page is held within the #content DIV:
div#content {
width: 960px;
float: left;
background-image: url("../img/contentBg.png");
background-repeat: repeat;
margin-top: 10px;
line-height: 1.8em;
border-top: 8px solid #5E88A2;
padding: 10px 15px 10px 15px;
}
And here is the CSS for the product boxes within the #content div:
.upper {
text-transform: uppercase;
}
.center {
text-align: center;
}
div#products {
float: left;
width: 100%;
margin-bottom: 25px;
}
div.productContainer {
float: left;
width: 265px;
font-size: 1em;
margin-left: 50px;
height: 200px;
padding-top: 25px;
text-align: right;
}
div.product {
float: left;
width: 200px;
}
div.product p {
}
div.product a {
display: block;
}
div.product img {
float: left;
}
div.product img:hover {
opacity: 0.8;
filter: alpha(opacity = 80);
}
div.transparent {
opacity: 0.8;
filter: alpha(opacity = 80);
}
And here is the HTML for the boxes:
<div class="productContainer">
<div class="product">
<h2 class="upper center">A2 Print</h2>
<a href='../edit/?productId=5&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A2-Print.png" alt="Representation of image printed at A2 Print through Website." /></a>
<p class="upper">16.5 inches x 23.4 inches<br /><strong>£15.99</strong></p>
<p class="upper smaller"><em><span><span class="yes">Yes</span> - your picture quality is high enough for this size</span> </em></p>
<p><a href='../edit/?productId=5&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
<div class="productContainer">
<div class="product transparent">
<h2 class="upper center">A1 Print</h2>
<a href='../edit/?productId=11&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A1-Print.png" alt="Representation of image printed at A1 Print through Website." /></a>
<p class="upper">23.4 inches x 33.1 inches<br /><strong>£19.99</strong></p>
<p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p>
<p><a href='../edit/?productId=11&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
<div class="productContainer">
<div class="product transparent">
<h2 class="upper center">Poster Print (60cm x 80cm)</h2>
<a href='../edit/?productId=12&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7Poster-Print-(60cm-x-80cm).png" alt="Representation of image printed at Poster Print (60cm x 80cm) through Website." /></a>
<p class="upper">23.6 inches x 31.5 inches<br /><strong>£13.95</strong></p>
<p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p>
<p><a href='../edit/?productId=12&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
Any idea what could be causing these DIVs to overlap? What I'd like is for all the boxes to fit within the #container div as expected. It's driving me crazy!
Cheers
Did you try to set to the footer
clear:both;
Also, set to the #content
overflow:hidden;
Add overflow: auto; in your content div CSS :)
Something a lot of people use is called clearfix. here is the code:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
To use this you just add the class clearfix to container. You will probably want to add it to whatever div is containing all the "productContainer"