I am trying to float two elements side by side but the preceding div elements seem to come in between the two as per the fiddle. i.e I want Find the best vendor on the left, login/register in the same line on the right and all other content below it.
HTML:
<div id="home-dir-left">
<div class="custom-widget-head">
<h3><span class="custom-section-head"> Find the Best Vendor</span></h3>
Login / Register
</div>
<div class="homecat-columns">
<div class="span2 directory-categories">
<div class="custom-widget-head">
<h4><span class="dircat-head"> Fashion</span></h4>
</div>
<span class="span-dircat">
<ul>
<li>Bridal Accessories</li>
</ul>
</span>
</div>
</div>
</div>
Do you want to do like this,please visit the link:
http://jsfiddle.net/pLBmz/2/
<div class="custom-widget-head"style="clear:both;">
<h4><span class="dircat-head">
Fashion</span></h4>
</div> <span class="span-dircat">
<ul>
<li>Bridal Accessories
</li></ul>
</span>
you have to clear you floats using a class clearfix
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
DEMO
Make change in followin css class
.custom-section-head
{
margin: 20px 0px 0px 0px;
}
.tools-login
{
margin: 30px 0px 0px 0px;
}
Add <br><br> before <ul>
Related
I'm building a chat interface, and my task is now to add a date between messages. The date must be centered, and messages must be traditionally on the left and right.
Messages are working correctly, but dates are a problem.
How it looks:
Chat is divided by sections. Each section has a date. Each section can have multiply messages.
Code of section is following:
<div>
<div class="discussionMessageDate">{date here}</div>
<ul className="noDot">
<li className="noDot + ..logic to figure out if to apple 'right' class"><span class="discussionMessage">{message}</span></li>
</ul>
</div>
classes are
.discussionMessage {
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
padding: 5px 13px;
list-style-type: none;
max-width: 300px;
float: left;
clear: both;
}
.discussionMessageDate {
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
padding: 5px 13px;
max-width: 300px;
display: block
}
.noDot {
list-style-type: none;
padding: 0;
margin: 0 0 5px 0;
}
.right {
float: right;
clear: both;
}
What am I doing wrong?
added a clearfix to the wrapping div, this looks like i think it should work
https://jsfiddle.net/hmtkyz96/
<div class="discussionMessageContainer">
<div class="discussionMessageDate">{date here}</div>
<ul class="noDot">
<li class="right"><span class="discussionMessage">{message}</span></li>
</ul>
</div>
.discussionMessageContainer::after {
content:'';
clear:both;
display:table;
}
You shoud add the "text-align: center;" property to your "discussionMessageDate" class, in order to center the text. A div displays its content aligned to the left, by default.
Also, I imagine you need to specify the max size of the container also, to 300px, otherwise, your list will spread across your screen, meanwhile, your date has a fixed size.
And you need to clear your float, because otherwise the parent of the floated element loses its height.
Like this:
body{
max-width: 300px;
}
.discussionMessageDate {
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
padding: 5px 13px;
max-width: 300px;
display: block;
text-align: center;
}
.clearer{
clear: both;
}
<div>
<div class="discussionMessageDate">{date here}</div>
<ul class="noDot">
<li class="right"><span class="discussionMessage">{message}</span></li>
<li class=""><span class="discussionMessage">{message}</span></li>
<li class="right"><span class="discussionMessage">{message}</span></li>
</ul>
</div>
<div class="clearer"></div>
<div>
<div class="discussionMessageDate">{date here}</div>
<ul class="noDot">
<li class="noDot + ..logic to figure out if to apple 'right' class"><span class="discussionMessage">{message}</span></li>
</ul>
</div>
</div>
https://www.citywidelaw.com/
For this page, there is a section with a Q and A (you click on question and answer is next to it. The Q symbol and A symbol are supposed to line-up. I'm not sure why the A is dropping. I tried a , but it had no effect.
I added an image. Thanks in advance.
HTML
<div class="row">
<div class="col-xs-12">
<div id="verticalTab" class="resp-vtabs" style="display: block; width: 100%; margin: 0px;">
<h2 class="resp-vtabs-heading">
<ul class="resp-tabs-list">
<div class="resp-tabs-container">
</div>
</div>
</div>
CSS:
.resp-vtabs .resp-tabs-container {
clear: none;
float: left;
min-height: 350px;
padding: 0 0 0 40px;
width: 53%;
}
.resp-tabs-container {
background-color: #fff;
clear: left;
padding: 0;
}
The "Q" symbol, the <h2> element, is an element above the two columns.
So here's what I would do. Create a <div> element around the <h2> and <ul> elements with a class of, say, resp-tabs-list-container. Then just rename, in your CSS, the selector .resp-vtabs ul.resp-tabs-list to .resp-vtabs .resp-tabs-list-container.
Pow.
https://jsfiddle.net/pepgw4cz/1/
This is a typical article list scenario, every item has its image, title, introtext and created time. As you can see in the 2nd item, where the title is longer, the table exceeds its designated width. This could be easily solved by flex, but my client is using a 2011 laptop with IE9 and she wouldn't let go.
So I am stuck with table. The container's width is unknown(fit mobile screen) as well as the itemBody's width(actually, setting them to a fixed width doesn't change anything.), and the item Title has to be limited to one line(white-space:nowrap), which contributes to the problem.
Here is the codes, I copy it from my site so the structure looks a little wierd, but look at the fiddle and you will get the idea
<ul>
<li class="card " k2id="84">
<div class="moduleItemImageContainer">
<a class="moduleItemImage">
</a>
</div>
<div class="moduleItemBody">
<div class="moduleItemBodyContainer">
<span class="moduleItemDateCreated">2016-06-11</span>
<a class="moduleItemTitle">Norm</a>
<div class="moduleItemIntrotext">
人民大会堂国庆宴会的细节 </div>
</div>
</div>
</li>
<li class="card " k2id="83">
<div class="moduleItemImageContainer">
<a class="moduleItemImage">
</a>
</div>
<div class="moduleItemBody">
<div class="moduleItemBodyContainer">
<span class="moduleItemDateCreated">2016-06-11</span>
<a class="moduleItemTitle">Looooooooong Title Long titleLooooooooong Title Long titl</a>
<div class="moduleItemIntrotext">
人民大会堂国庆宴会的细节 </div>
</div>
</div>
</li>
</ul>
<style>
li {
width: 100%;
list-style: none;
display: table;
margin-bottom: 16px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8)
}
li>* {
display: table-cell;
vertical-align: top
}
div.moduleItemImageContainer{width:1%}
a.moduleItemImage {
display: block;
background-image: url('http://placehold.it/100x100');
width: 100px;
height: 100px;
}
a.moduleItemTitle{white-space:nowrap;overflow:hidden;display:block}
div.moduleItemBody {
padding: 16px;
}
div.moduleItemBodyContainer{
height:68px;overflow:hidden
}
span {
float: right
}
ul {
width: 500px
}
</style>
So, how to prevent table from behaving like this?
just give your div.moduleItemBody a max-width:1px; DEMO
and if you want your title to break in multiple lines if it is too long then remove white-space: nowrap; from a.moduleItemTitle DEMO
<table style='table-layout:fixed'>
For those who use bootstrap, please you can add a class class="text-wrap" on the cells.
This will automatically give the required width to the table cells according to the data its holding.
I wanted to have the entire div link to microsoft.com. How do I add a link to the entire div wrapper-promo? I wanted it to where ever the user clicks, they would go to the link.
Here's my jsfiddle:
http://jsfiddle.net/huskydawgs/eL7rwLx3/45/
Here's my HTML:
<div class="wrapper-promo">
<div class="title-top">
<h2 class="block-title">
Three states or less</h2>
</div>
<div class="promo-content">
<p>Bid and RFP Notification Only</p>
<p>Online and email support</p>
<p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
</div>
Here's my CSS:
.wrapper-promo {
background-color: #e2e3e4;
margin: 10px 0;
width: 100%;
}
.title-top {
background-color: #2251a4;
height: 40px;
line-height: 40px;
}
.title-top-cell {
display: table-cell;
vertical-align: middle;
}
.promo-content {
margin: 20px;
padding: 0 0 10px 0;
}
h2 {
font-family:Arial,sans-serif;
font-size:19px;
font-weight: bold;
color:#fff;
margin: 10px 0 -10px 0;
text-transform:none;
}
h2.block-title {
font-size:22px;
margin: 0;
text-align: center;
text-transform:none;
}
.promo-content p {
font-family: Arial,sans-serif;
font-size: 14px;
color: #232323;
line-height: 20px;
text-align: center;
}
I would suggest adding an empty anchor element as a direct child of the .wrapper-promo element. Then you can absolutely position it relative to the parent element so that it will take whatever dimensions the parent element is.
In doing so, the entire element is clickable, and you don't have to worry about wrapping the a element around any div or block-level elements:
Updated Example
.wrapper-promo {
position: relative;
}
.wrapper-promo > a {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
<div class="wrapper-promo">
<div class="title-top"><!-- ... --></div>
<div class="promo-content"><!-- ... --></div>
</div>
With HTML5 it is allowed to wrap block elements within a tags even though the a tag is an inline element. Here is a fiddle where your original link is used as a container for all the other elements.
http://jsfiddle.net/Nillervision/761tubkc/
<a class="blockLink" href="http://www.microsoft.com">
<div class="wrapper-promo">
<div class="title-top">
<h2 class="block-title">
Three states or less
</h2>
</div>
<div class="promo-content">
<p>Bid and RFP Notification Only</p>
<p>Online and email support</p>
<p>
<img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" />
</p>
</div>
</div>
</a>
Instead of a div, just use an a with display:block;.
It will behave as a block element in your flow, and you can set an href etc.
You may need to override its color, text-decoration, and :visited CSS.
The alternative here is to use a click event with Javascript - blech.
Code request edit:
All you need to do is change the style of .wrapper-promo:
.wrapper-promo {
background-color: #e2e3e4;
display:block;
margin: 10px 0;
text-decoration: none;
width: 100%;
}
then change it to an a:
<a class="wrapper-promo" href='http://www.google.com/'>
...
</a>
i'm trying to write a div box with headings and links below to it, but somehow i can't get the links to display next to eachother, i've tried using display:inline, but it did no effect, i've also tried float, position etc, but just can't get what i want without messing up.
my code is here: http://jsfiddle.net/dfc8gceg/2/
<div style="background:#E1ED9D; width: 25%;height:250px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<a href="">
<h4 style="background:blue; width:50%; color:#0e8dbc; text-align:center; margin:10% 0 0 0; ">Link1</h4>
</a>
<a href="">
<h4 style="background:orange; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link2</h4>
</a>
<a href="">
<h4 style="background:purple; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link3</h4>
</a>
<a href="">
<h4 style="background:red; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link4</h4>
</a>
</div>
Sorry for the repetition of code, it's because i can't use CSS or put code into head section, only body section of html due to my task requirement,
i would appreciate alot if someone can show me the answer without too much change on my code
I got rid of the h4 tags and used divs instead
http://jsfiddle.net/dfc8gceg/8/
<div style="background:#E1ED9D; width: 50%;height:150px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<a href="">
<div id="div1">hej</div>
</a>
<a href="">
<div id="div2">hej</div>
</a>
<a href="">
<div id="div3">hej</div>
</a>
<a href="">
<div id="div4">hej</div>
</a>
</div>
I also added some css to the jsfiddle
you should look more into how to use css and html
Hope this works out for you!
I made a JSFiddle, is this what you were aiming for?
http://jsfiddle.net/dfc8gceg/7/
Here is the HTML
<div id="container">
<h3>I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<h4>Link1</h4>
<h4>Link3</h4>
<h4>Link2</h4>
<h4>Link4</h4>
</div>
With accompanying CSS
#container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
h3 {
text-align: center;
margin:0;
}
a {
display: inline-block;
}
.link {
width: 50%;
color: #0e8dbc;
text-align: center;
display: inline-block;
float: left;
}
#link1 {
background: blue;
margin: 10% 0 0 0;
}
#link2 {
background: orange;
margin: 3% 0 0 0;
}
#link3 {
background: purple;
margin: 10% 0 0 0;
}
#link4 {
background: red;
margin: 3% 0 0 0;
}
I think I achieved what you were looking for.
Hope this helps! :D
PS: I'm a noob at Stack Overflow, did I format this correctly? It wanted the code in the answer so...
EDIT: I kept the H4 elements for you, but feel free to change them (I didn't want to change any of your code, I kept it all just made it neater)
A preferred method would be instead to use an unordered list (<ul><li></li></ul>), and then add css to the list, display: inline; to remove the default block level display. Alternatively, you can use display: block; float: left;, which you would need in order to give a width to the li.
Moreover, you should not be using inline CSS, but rather a stylesheet.
Like this:
CSS:
.container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
.container h3 {
text-align:center;
margin:0;
font-size: 14px;
font-family: arial;
font-weight: normal;
}
.list {
width: 100%;
padding: 15px 0 0 0;
margin: 0;
}
.list li {
style-type: none;
display: block;
float: left;
width: 50%;
margin: 15px 0 0 0;
padding: 10px 0;
text-align:center;
}
.list li a {
color:#0e8dbc;
}
#first-link {
background:blue;
}
#second-link {
background:orange;
}
#third-link {
background:purple;
}
#fourth-link {
background:red;
}
HTML
<div class="container">
<h3>I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<ul class="list">
<li id="first-link">Link1</li>
<li id="second-link">Link2</li>
</ul>
<ul class="list">
<li id="third-link">Link3</li>
<li id="fourth-link">Link4</li>
</ul>
</div>
Also, as above, you don't need the H4s because that is poor coding to put into a menu (what you have is essentially a menu). H4 is better used as a header tag. By instead defining css classes to the LI elements, there is no need for a specific html tag like h4.
EDIT: I improved the CSS code from what I had before. I changed the ID elements to classes (class is used if there will be more elements using the same class), and moved the link classes into the LI. I also changed the li classes to IDs because ID is to be used when it appears only one time on the page. Given the specificity of the IDs, these will likely not be used again. If they are, you should change it back to a class.
jsfiddle: http://jsfiddle.net/Lxyjjfx2/1/