CSS prevent div from moving top - html

Here's the problem:
`http://jsfiddle.net/5gju85un/3/`
I want to prevend div #3 from moving higher while keep float left.
How can I do that?
EDIT
These divs are created by loop in my original code so I can't just make two parent divs.
EDIT
Inserted whole code (I'm making own template to use in wordpress)
HTML/PHP
if ( $loop->have_posts() ) {
while ( $loop->have_posts() ) : $loop->the_post()?>
<div class="produkt ramka">
<div class="produkt_obraz">
<?php woocommerce_show_product_images();?>
</div>
<div class="produkt_nazwa">
<h3 class="produkt_litery"><?php woocommerce_template_single_title();?></h3>
</div>
<div class="produkt_cena">
<?php woocommerce_template_single_price();?>
</div>
<div class="produkt_line">
</div>
<div class="produkt_opis">
<?php the_content();?>
</div>
<div class="produkt_koszyk">
<?php woocommerce_template_loop_add_to_cart()?>
</div>
</div>
<?php endwhile;
}
CSS
.produkt
{
display: inline-block;
height:auto;
min-height:120px;
width:49.50%;
margin-bottom:5px;
background-color:#252525;
overflow:hidden;
}
.produkt:nth-child(2n+1)
{
float:left;
}
.produkt:nth-child(2n)
{
float:right;
}
As you can see the code I've done in jsfiddle is based on this

demo
<div class="divs st">div1</div>
<div class="divs nd">div2</div>
<div style="clear:both"></div>
<div class="divs rd">div3</div>
<div class="divs th">div4</div>
<div class="divs">div5</div>
<div class="divs">div6</div>

Related

exclude div from parent style

I'm trying to override the .container class in bootstrap. I'm using Drupal 7 and I have a css file for my theme which is working perfectly until I want to override the .container
my HTML
<div class="main-container <?php print $container_class; ?>">
<div class="top-div" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>
that PHP code will insert the class .container
I need to give the div with class .top-diva 100% size without any padding from the .container I've tried the child > selector and descendant selector and the :not(.top-div) methods nothing works. When I use the :not(.top-div) it applies changes on each and every page and element on the website AND the div which contains the .top-div which is really weird. Suggestions?
In bootstrap, the padding is applied on the container, not the inner divs. To override this on one element you need to give it negative horizontal margins.
Something like:
.container .top-div {
margin-left:-10px;
margin-right:-10px;
}
Where 10px should be replaced by the padding on .main-container.
If this doesn't work right away you may need greater specificity
Bootstrap's built-in .row class uses this method
Why don't you try:
.main-container {
position:relative;
}
.top-div {
position:absolute;
left:0;
top:0;
}
<div class="main-container <?php print $container_class; ?>">
<div class="top-div" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>
If you are using bootstrap css than you don't need to give any custom css
You try to just add row class in your top-div class
it's a in built in bootstrap.css So no need for any extra custom css.
.row {
margin-left: -10px;
margin-right: -10px;
}
Example
<div class="main-container <?php print $container_class; ?>">
<div class="top-div row" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="main-container <?php print $container_class; ?>">
<div class="top-div row" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div>
</div>
Hope this will helps you.

Accessing the first <section> within unknown number of divs

Given the following markup:
<div className="row">
<noscript></noscript>
</div>
<div className="row">
<noscript></noscript>
</div>
<div className="row">
<section></section>
</div>
<div className="row">
<section></section>
</div>
<div className="row">
<section></section>
</div>
...
There may be any number of divs at the top that contain noscript.
How can I access only the first section in the rows?
It won't be possible to achieve this using CSS only, you need to use Javascript.
Explanation:
Because :nth-of-type(1), nth-child(), :first-of-type and :first-child will always give you all the sections as they are the first child and the first of type section in their parents div.
All these selectors will only work, if you are putting all the sections inside one parent div with class="row".
JavaScript solution:
You can use document.querySelector(".row section") to get the first section in a div with class="row".
But with CSS only this won't be possible:
document.querySelector(".row section").innerHTML = "I am the first section !";
.row {
width: 200px;
height: 50px;
border: 1px solid black;
}
<div class="row">
<noscript></noscript>
</div>
<div class="row">
<noscript></noscript>
</div>
<div class="row">
<section></section>
</div>
<div class="row">
<section></section>
</div>
<div class="row">
<section></section>
</div>
Note:
Also in HTML it's class="row" and not className="row", in fact className is used in Javascript.
Alternatively to #chsdk, you could use the jQuery method of .first()
HTML:
<div class="row">
<noscript></noscript>
</div>
<div class="row">
<noscript></noscript>
</div>
<div class="row">
<section>1</section>
</div>
<div class="row">
<section>2</section>
</div>
<div class="row">
<section>3</section>
</div>
CSS
.row {
display:block;
height:50px;
width:50px;
}
section {
display:block;
height:20px;
width:20px;
}
jQuery
$('.row section').first().css('background','#111');
https://jsfiddle.net/ojuun4uh/
Using JavaScript, the getElementsByTagName method can help you. Try this:
var section = document.getElementsByTagName('section').item(0);

How to display line items in twos?

I have this site:
link
At the bottom you will find the footer which has 7 items (printing, textile, photo, advertising, gastronomy, about us, contact).
Currently all these elements are in line this shape
Printing-Textile-Photo-Advertising-Gastronomy-About US-Contact
I want to do so
Printing-Textile
Photo-Advertising
Gastronomy-About US
Contact
CODE HTML
<div class="site-info container">
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
</div>
CODE CSS:
.footer-blocks{
float:left;
width:12%;
color:#fff;
margin-right:2%;
text-align:left;
}
.footer-blocks:last-child{
margin-right:0;
}
I tried to modify the CSS code and got it form
<div class="site-info container">
<div class="footer-blocks" style="float:left">
//some code HTML
</div>
<div class="footer-blocks" style="float:left">
//some code HTML
</div>
<div class="footer-blocks" style="float:left">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
</div>
CODE CSS NEW:
.footer-blocks{
width:12%;
color:#fff;
margin-right:2%;
text-align:left;
}
I know it is not good what we tried but I do not figure out how I could arrange them as they wish.
Probably something simple but I do not know how to fix it.
Could you please help me?
Thanks in advance!
Set the width to 48% for the blocks and min-height will give it equal area in vertical direction. If you need to limit the spacing between the columns, set a fixed width for the parent element.
.site-info.container {
width: 500px; /* Add */
}
.footer-blocks {
color: #fff;
float: left;
margin-right: 2%;
min-height: 330px; /* Add */
text-align: left;
width: 48%; /* Add */
}
Output:
add
<div style="clear: both;">
after each 2 blocks
and change:
.footer-blocks{
float:left;
width:12%;
color:#fff;
margin-right:2%;
text-align:left;
}
to:
.footer-blocks{
float:left;
width:50%;
color:#fff;
text-align:left;
}
Since you're using bootstrap, you can split every two columns into different rows.
Here's some code to get you started
<div class="site-info container">
<div class="row">
<div class="col-md-6">
<div class="footer-blocks">
-- Printing Stuff
</div>
</div>
<div class="col-md-6">
<div class="footer-blocks">
-- Textile Stuff
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="footer-blocks">
-- Photo Stuff
</div>
</div>
<div class="col-md-6">
<div class="footer-blocks">
-- Advertising Stuff
</div>
</div>
</div>
-- ETC.
</div>
Also, there's no need to add the style float:left for your inline css since it's already in the class.
You should check out the bootstrap documentation for more help:
Grid Documentation

Vertical Alignment of multiple lines

I know this question has been asked before. However, I do not seem to find my mistake.
I set up a plnkr. I try to align some text vertically, whereas the the stuff that needs to be aligned is nested into multiple divs.
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div class="row">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are your (I am good too)
</div>
</div>
</div>
</div>
</div>
</div>
and in my CSS I have this.
.news{
background-color:black;
line-height:200px;
width:200px;
height:200px;
display:table;
}
#newsDetails{
display:table-cell;
vertical-align:middle;
}
So basically I have I lineheight given from the outer div with class="news". I want the the nested div to be aligned vertically. Is there any way to do this?
http://plnkr.co/edit/cMaCrG1Y8Ky48HwtgNPk?p=preview
If you want to use the display: table property, you should set it in the parent node, like:
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div id="newsParent" class="row">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are your (I am good too)
</div>
</div>
</div>
</div>
</div>
</div>
.news{
background-color:black;
width:200px;
height:200px;
}
#newsParent {
display:table;
}
#newsDetails{
height: 200px;
display:table-cell;
vertical-align:middle;
}
Give it a try and let me know if it helps!
You can make wrapper display: table and child div display: table-cell; vertical-align: middle;. find the below jsfiddle demo.
HTML
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div class="row newsDetailswrap">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are you?</div>
</div>
</div>
</div>
</div>
</div>
CSS
.newsDetailswrap{
background: red;
height: 100px;
display:table;
}
#newsDetails{
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/hhbnywq1/

many DIV Containers in 2 columns with the same flexible height for each row

I solved The proble...The solution is here:http://jsfiddle.net/4Z8np/48/
I generated this HTML code by a PHP function:
<div class="columns">
<?php
foreach($rows as $rows))
{?>
<div class="row">
<?php echo $row->content ?>
</div>
<?php } ?>
</div>
CSS:
div.columns{
width:100%;
}
div.rows{
width:50%;float:right;border:1px solid red
}
The structure is something like this:
<div class="columns">
<div class="rows">
<p>text</p><p>text</p><p>text</p>
</div>
<div class="rows">
<p>text</p>
</div>
<div class="rows">
<p>text</p><p>text</p>
</div>
<div class="rows">
<p>text</p>
</div>
</div>
http://jsfiddle.net/4Z8np/4
4/
The result is many red box in 2 colums beside each other...right?
My Problem:
The height of Red boxes are not same...and some times just one box is in a row.
I Want to:
I want to set each 2 Red box in each row with a same height.(according to bigger height not fix height)
How can do it?
EDITED:
http://jsfiddle.net/4Z8np/44/
This result is ugly...for example text7 has gone to a new line!
At least I wana text7 comes right after latest colums...
how about using css display: (table|table-row|table-cell)?
http://jsfiddle.net/4Z8np/46/
div.table{
display: table;
width: 100%;
height: 100%;
}
div.row{
display: table-row;
height: 100%;
}
div.cell{
border:1px solid red;
display:table-cell;
}