I have whitespace above a row/container (Im not sure which, probably the container?) that I need gone. The code is straightforward,
<div class="row">
<div class="col-md-9">
<blockquote data-wow-delay="0.1s" data-wow-duration="1s" class="about-quote wow fadeInUp">
<div>
<h1 id="one">big</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
</div>
<div>
<h1 id="two">willy</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
</div>
</blockquote>
</div>
Nothing fancy, yet there is constant chunk of whitespace above it separating it from the element above.
I've tried removing it with
body {
margin: 0 !important;
padding: 0 !important;
}
and by replacing body with container, row and col respectively, but the white space remained and it just messed up the layout.
Related
I have three columns inside a section tag in HTML but they sit on top of each other instead of standing next to eachother.
<section class="sec-top">
<div style="background-color:#f4f5f9">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="../../assets/apps.gif" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
I am not sure what I am doing wrong or why this is happening. Any help is appreciated. Thanks!
A div is a block-level element. That means that even if you reduce it's width it will still cause a new line to be created:
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can). https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
See also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
You need to either change the display value of .column (or its parent) or remove it from the normal flow with a float.
See examples below.
In the first example, I added float:left to the column class. This removes each column from the normal flow and they are stacked to the left of the screen.
In the second example, I changed the container div to the flexbox model and added flex: 1 1 33% to each column. This will cause each column to always take up 33% of the width of the parent. Here is a great resource on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.column {
width: 33%;
float: left;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.gify {
max-width: 100%;
}
.flex-parent {
display: flex;
flex-direction:row;
}
.flex-parent>.column {
flex: 1 1 33%;
float: none;
}
<section class="sec-top">
<strong>Using Float</strong>
<div style="background-color:#f4f5f9;" class="clearfix">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="https://via.placeholder.com/450" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
<section class="sec-top" style="margin-top:30px">
<strong>Using FlexBox</strong>
<div style="background-color:#f4f5f9;" class="flex-parent">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="https://via.placeholder.com/450" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
I'd like to have a button which responsively stays beside a paragraph, without the paragraph text wrapping around the button.
For example, here is the current code I am using:
<div class="myclass">
Button
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
This produces the following:
[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
What I want, is the following:
[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
I want it to remain this way no matter what the screen resolution is.
How would I accomplish this?
You can use Bootstraps Media Object to do this.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<div class="media">
<div class="media-left"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<hr>
<div class="media">
<div class="media-left media-middle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<hr>
<div class="media">
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="media-right media-middle"> Button
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-middle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="media-right media-middle"> Button
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-midle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<hr>
Try keeping the button in different div and the paragraph in another one.
You tagged bootstrap so you can put the button and text in separate divs with column width settings. The number after the device width is divided by 12 for the width percentage. You can also add multiple device widths to improve responsiveness.
<div class="row myclass">
<div class="col-xs-4">
Button
</div>
<div class="col-xs-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
http://jsfiddle.net/zsenq6h6/
Ended up just using display: table and display table-cell for this. i.e.:
HTML:
<div class="filters">
<div class="cell">
Button
</div>
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tempus ante sit amet hendrerit. Nunc vel nunc id nibh rhoncus posuere. Nunc tincidunt nisi nec diam lacinia commodo. Quisque erat nisi, vulputate eget lacinia finibus, aliquet quis est. Vivamus at risus egestas, interdum erat ut, condimentum dui.
</div>
</div>
CSS:
.filters {
display: table;
}
.filters .cell {
display: table-cell;
vertical-align: top;
}
bootstrap is the best way to do this effect. if you don't want to use bootstrap then you can use the following code.
html :
<div class="myclass">
Button
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
css :
a {
width:10%;
display:inline-block;
vertical-align:top;
}
p{
width:70%;
display:inline-block;
margin-top:0 !important;
}
#media screen and (max-width:500px){
a {
margin-right:20px;
}
}
}
http://jsfiddle.net/souraj/d0u61xpg/
media query part is required when the resolution will be below 500px . otherwise there is no need to use it.
Three column layout, all three columns taking up 1/3 of the page. Height of 100%.
http://jsfiddle.net/9ngN3/4/
The column with the most <div class="aTweet">'s in it decides the height of all three columns. The others are 'pulled' down to its height.
I want all three columns to be the same height, with the tweets being at the top. The empty space at the bottom of a column being filled with grey (background).
I just don't see why they are being pulled down to the bottom. It gets super interesting when you set height in .thirdCol to 400px (for eg).
Any ideas? I'm sure this is simple but i'm just missing it. Thanks.
(Using Chrome + Opera BTW)
Code in the JS Fiddle -
HTML:
<div id="manageStockGridArea" class="mainContentGridArea">
<div id="FeedsTab" class="BlockInputArea">
<div id="feed1" class="thirdCol">
<div class="fitler">
<select><option>OP1</option><option>Op2</option></select>
<select><option>OP1</option><option>Op2</option></select>
</div>
<div class="streamContainer">
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
</div>
</div>
<div id="feed2" class="thirdCol">
<div class="fitler">
<select><option>OP1</option><option>Op2</option></select>
<select><option>OP1</option><option>Op2</option></select>
</div>
<div class="streamContainer">
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
</div>
</div>
<div id="feed3" class="thirdCol">
<div class="fitler">
<select><option>OP1</option><option>Op2</option></select>
<select><option>OP1</option><option>Op2</option></select>
</div>
<div class="streamContainer">
<div class="aTweet">
<span class="tweetHandle">AtPeelypeel (firstName lastName)</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span>
</div>
</div>
</div>
</div>
CSS:
body,html, #manageStockGridArea{height:100%; min-height: 100% !important;}
.thirdCol
{
width:32.5%;
display:inline-block;
background-color:grey;
height:400px;
}
.aTweet
{
background-color:Teal;
}
.tweetHandle
{
display:block;
}
Being inline-block you can control the alignment with vertical-align:
http://jsfiddle.net/9ngN3/4/
#FeedsTab > div{
vertical-align: top;
}
In terms of the columns the same height, there are many tricks available for faux-columns in CSS. Take a look at this example on CSS tricks for more information.
Modify your CSS as follows:
.thirdCol {
width:32.5%;
display:inline-block;
background-color:grey;
min-height:100%;
vertical-align: top;
}
By default, the inline blocks are vertically aligned to the baseline of the text, which corresponds to the baseline level of the bottom-most line of each text block.
Note: Getting the background color is a bit trickier...
You can try this:
demo
.thirdCol
{
width:32.5%;
display:inline-block;
background-color:grey;
min-height:100%;
vertical-align:top;
}
I'm having a big trouble... i cant make a div grow with content...
i've got this HTML to fix it here... but i cant do that... can someone help me with this...??
I Uploaded the link here: http://efdutra.com/help
The div that i need to grow, well.. you will see the Lorem Ipsum getting over the footer... :p
There is some part of the html:
<div id="boxes">
<div id="boxFinal">
<div id="linksBoxFinal">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa felis, accumsan eget mattis sed</li>
</ul>
</div>
<img id="barraFinal" src="img/barraBoxFinal.png" />
</div>
</div>
And here the css:
#boxes{
margin:0;
padding:0;
position:relative;
float:left;
height: 100%;
width: 100%;
overflow: none;
}
#boxFinal{
margin:15px 0 0 8px;
padding:0;
float:left;
position:relative;
width:100%;
max-height:100%;
overflow:inherit;
}
Can someone please help me...?
Having played around with your styles I see a lot of things wrong. Firstly you do not need to float everything left. next you need to add lis to around you anchor tags in the ul. third you need to remove the absolute positioning of #lineBoxFinal. If you use the following styles (replacing your existing ones) then the footer should work properly
//line 241
#linksBoxFinal ul {
margin: 5px 0 35px 15px;
z-index: 3;
}
//line 262
#barraFinal {
position: relative;
margin: 0 110px;
z-index: 2;
clear: both;
}
Thats because position:absolute on div[.linksBoxFinal]>ul
Thats would be in #linksBoxFinal ul on line 241 in your style.css
.
.
try this:
<ul style="position:relative;">
(also, remove the not so needed margin bottom)
as to your question about putting an li inside an anchor, i believe the answer is no. Anchors cannot house block level elements.
I have an ordered list which is actually a display of products on a page. Within each list item (li) there is some content followed by a div containing some more content, before closing the list item.
I need for the div within each list item to expand (its width) beyond its parent list item and actually fill the width of the ordered list (ol). Each div also needs to sit directly below its parent list item and push any following list items down.
I know the probably doesn't make sense, it's not very easy to explain.
Here's the HTML I have so far:
<ol class="products group">
<li>
<a href="#">
<img src="assets/img/ind-aerospace.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-automotive.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
<!-- Expand this -->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
</div>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
Here's my CSS:
ol.products {
position: relative;
}
ol.products li {
list-style: none;
float: left;
width: 30%;
margin: 0 3% 1.5em 0;
border-bottom: dotted 1px #ed2124;
border-bottom: dotted 1px rgba(237,33,36,.5);
}
ol.products li p {
margin: .5em 0;
min-height: 140px;
line-height: 1.2em;
}
ol.products li div {
position: relative;
width: 100%;
border: solid 1px red;
}
ol.products li div p {
min-height: 0;
}
Here's a wireframe of the list that might help it make a little sense:
You should use jQuery to accomplish this. You can add a "expandable" class to each of the info boxes and in the css have it display:none; then when you click on the parent info button use jQuery to position the box as you need it to (and return the display to visible, add animation, fade, etc). You will need to have jQuery traverse your html and place the info box in the correct area.
I tried something similar with css hover states, you can see my results here:
CSS Popouts
It's similar because I have a nested div that's set to display:none by default and is set to display:block by a hover anywhere on the list item.
The div floats overtop the other content though, rather than pushing it out of the way like your wireframes seem to indicate. You might have to get some JS going for you like #JohnP and #Collin White mentioned.