Default positioning of parent DIVs is being ignored - css

I'm a newbie in CSS layout. I need to display content like this:
+-------------------------------------+
| Content_A|
| Content_B Content_C ... |
+-------------------------------------+
I want a very simple markup and CSS, so I made this:
<div>
<div id="d1">
<div style="float: right;">Content_A</div>
</div>
<div id="d2">
<div style="float: left;">Content_B</div>
<div style="float: left;">Content_C</div>
<div>...</div>
</div>
</div>
But the result is this:
+-------------------------------------+
| Content_B Content_C ... Content_A|
+-------------------------------------+
Looks like default positioning of DIVs d1 and d2 is being ignored. Why and what's the solution?
If you have another markup/CSS suggestion for mentioned required layout (using SPAN for example), it will be welcome.
By the way, I mixed HTML and CSS just to make this problem easier to understand. In the real page, they will be separated!


Here is the solution:
<div>
<div id="d1">
<div style="text-align: right;">Content_A</div>
</div>
<div id="d2">
<div style="float: left;">Content_B</div>
<div style="float: left;">Content_C</div>
<div>...</div>
</div>
</div>
Let me know if it works for you or if you still have problem.


You can set display format for outer-most div to align the contents vertically:
<div style="display: table;">
<div id="d1">
<div style="float: right;">Content_A</div>
</div>
<div id="d2">
<div style="float: left;">Content_B</div>
<div style="float: left;">Content_C</div>
<div>...</div>
</div>
</div>


Try this:
<div>
<div id="d1">
<div style="float: right;">Content_A</div>
<div style="clear:both;"></div>
</div>
<div id="d2">
<div style="float: left;">Content_B</div>
<div style="float: left;">Content_C</div>
<div>...</div>
<div style="clear:both;"></div>
</div>
</div>
The clear property is a way of saying "make sure this element does not run alongside a previous float". Without having an element with clear, all later content on the page would attempt to flow alongside the columns. You could say that we're telling the browser, "the floats end here".
Check this link for more information.

Related

How to click a div with certain text in a nested div using cypress?

Below is my HTML code :
<div class="main">
<div class="box">
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link1</a>
</div>
<div class="cell">type</div>
<div class="cell">description</div>
</div>
<div class="box"> //i want to click this element
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link2</a>
</div>
<div class="cell">type1</div>
<div class="cell">description1</div>
</div>
<div class="box">
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link3</a>
</div>
<div class="cell">type2</div>
<div class="cell">description2</div>
</div>
</div>
I'd like to click on the div with the class box containing the <a>link2</a> tag.
I have tried this :
cy.get(`.main>div`).contains('link2').click();
This clicks on the link element itself, but I'd like it to click the div element that contains it (the <a>link2</a> tag) instead.
Is there any way to do this?
I'm looking forward to any tips and solutions you might provide.
Thanks.

You could try getting the link2's parent element which is the div you want to click, in the following way:
cy.get(`.main>div`).contains('link2').parent().click();

I believe you can use a selector in 'contains' itself like below
cy.contains('.main>div', 'link2').click();

How add a padding to div without using css in bootstrap?

I am trying to add a padding-bottom to an div class="col-md-4" directly without using css. Is it possible?
I tried this code
<div class="col-md-4 padding-bottom:15px">
also
<div class="col-md-4" "padding-bottom:15px">
full content code is
<div class="gal">
<div class="container">
<div class="col-md-12 no-padding">
<div class="row">
<div class="grid clearfix">
#foreach($albums as $album)
<div class="col-md-4">
<figure class="effect-julia"> <img src="{{$album->gallery->imageUrl(null,300,239)}}" alt="czcsdcsd -{{$album->name}}"/>
<figcaption>
<h2>{{$album->name}}</h2>
<div>
<p>View More</p>
</div>
View more </figcaption>
</figure>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
it does not change anything.please help

<div class="col-md-4" style="padding-bottom:15px"></div>
Just use the attribute style, but I have to say using CSS in the HTML directly is not the best way...

Also, you can use bs4 classes like pb-number for setting padding-bottom, or pt-number for setting padding-top where number is number from 0 to 5 (or auto) which is equivalent to values in rem from .25rem to 3rem.
In your case, you can use class="pb-1" for example.
You can find out more in the official documentation of bootstrap4:

Make column fixed position in bootstrap

Using Bootstrap, I have a grid column class="col-lg-3" that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).
<div class="row">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Just the same way like the left column in LifeHacker.com
You will see that the left part is fixed however I scroll though the page.
I use bootstrap v3.1.1

<div class="row">
<div class="col-lg-3">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
Normal data enter code here
</div>
</div>

iterating over Ihab's answer, just using position:fixed and bootstraps col-offset you don't need to be specific on the width.
<div class="row">
<div class="col-lg-3" style="position:fixed">
Fixed content
</div>
<div class="col-lg-9 col-lg-offset-3">
Normal scrollable content
</div>
</div>

Following the solution here http://jsfiddle.net/dRbe4/,
<div class="row">
<div class="col-lg-3 fixed">
Fixed content
</div>
<div class="col-lg-9 scrollit">
Normal scrollable content
</div>
</div>
I modified some css to work just perfect:
.fixed {
position: fixed;
width: 25%;
}
.scrollit {
float: left;
width: 71%
}
Thanks #Lowkase for sharing the solution.

in Bootstrap 3 class="affix" works, but in Bootstrap 4 it does not.
I solved this problem in Bootstrap 4 with class="sticky-top"
(using position: fixed in CSS has its own problems)
code will be something like this:
<div class="row">
<div class="col-lg-3">
<div class="sticky-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>

Updated for Bootstrap 4
Bootstrap 4 now includes a position-fixed class for this purpose so there is no need for additional CSS...
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="position-fixed">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
</div>
https://www.codeply.com/go/yOF9csaptw

Bootstrap 5
The solution is very similar to v4, but you can use responsive variations with .sticky-*-top classes.
<div class="row">
<div class="col-lg-3">
<div class="sticky-md-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Docs: https://getbootstrap.com/docs/5.0/helpers/position/#responsive-sticky-top

Use this, works for me and solve problems with small screen.
<div class="row">
<!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
<div class="col-lg-3 device-lg visible-lg">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
<!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
<div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
<div>
NO fixed position
</div>
</div>
Normal data enter code here
</div>
</div>

With bootstrap 4 just use col-auto
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto">
Fixed content
</div>
<div class="col-sm">
Normal scrollable content
</div>
</div>
</div>

If you really want to do it that way, you can't do it in "col- *", because it's going to overlap each other, you should do it in the parent class "row", but depending on what you're doing, you might have a problem with the browser scroll that will be "cut" from the screen, however, is simple to solve, just control the column width and everything will be fine.
<div class="row fixed-top h-100">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9 overflow-auto h-100">
Normal scrollable content
</div>
</div>

Use .col instead of col-lg-3 :
<div class="row">
<div class="col">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>

Grids in box bootstrap

I'm trying to bulid grids like the photo below
IMG LINK: http://postimg.org/image/qo3b4nof1/
But i'm getting the DIV E in almost next to the D-DIV
here's my code
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="col-md-1">A</div><br/>
<div class="col-md-1">B</div><br/>
<div class="col-md-1">C</div>
</div>
<div class="col-md-11">D<br/>
<div class="col-md-1">E</div>
</div>
</div>
</div>
The break-lines i added because DIV-A and DIV-B become one piece without breaklines.
is it better to do it with table ?

You do not need to use container and row with bootstrap 3.*
I changed you code to match the provided screenshot, see this http://jsfiddle.net/Sd2zw/ .
I just use xs columns because the small screen of jsfiddle, you can replace it back by md :
<div>
<div class="col-xs-1">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<span class="clearfix"></span>
</div>
<div class="col-xs-11">
<div class="col-xs-12 d-container">D</div>
<div class="col-xs-12">
<div class="col-xs-1">E</div>
<span class="clearfix"></span>
</div>
</div>
<span class="clearfix"></span>
</div>
Also, use some clearfix tags to clear the float.

CSS3 div and last-child - how aright?

CODE:
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
I would like make that last div, LeftDiv, get CSS display:none.
For it I use code: div.AllDiv .LeftDiv .LeftDiv2:last-child{display:none;}, but it is not working.
Also i try use i usediv.AllDiv:last-child div.LeftDiv .LeftDiv2{display:none;}, but it not work too.
Tell me please where error and how write it correctly?

LeftDiv2 is the first child if it's parent element, not the last child. However, you don't need the last child class at all. just remove :last-child. If you really wanted to select it using the pseudo class you would want :first-child in your current markup.

Resources