Im trying do this
<div>
<div style="width:50%;"> first div </div>
<div style="width:50%;"> second div </div>
</div>
Sometimes dynamically first or second div will not be displayed.
when first div is not displayed i need second assume width 100% and vice versa.
Can i do this just with css? min-weigth or max-width or something like that?
You can use :only-child pseudo class
.childDiv
{
width:50%;
}
.childDiv:only-child
{
width:100%;
}
HTML
<div>
<div class="childDiv'> first div </div>
<div class="childDiv'> second div </div>
</div>
Try using the auto margin CSS properties:
.myClass
{
margin:0px auto;
width:50 //You can set this to whatever or take it out
}
And add to HTML
<div>
<div class="myClass'> first div </div>
<div class="myClass'> second div </div>
</div>
Related
I am trying to create a "sticky" navigation on my page where a div gets position:fixed; once the user has scrolled to the element. The functionality is working as expected, but the widths of the two columns that are supposed to stick to the top change once the sticky class is added. I tried adding width:100%; to the CSS of the sticky element, but then the element expands beyond the container.
How can I make sure the column widths stay where they should be when position:fixed; is added?
HMTL:
<div class="container">
<div class="padding"></div>
<div class="anchor"></div>
<div class="row sticky">
<div class="col-sm-6">
Testing
</div>
<div class="col-sm-6">
Testing
</div>
</div>
<div class="padding2"></div>
</div>
CSS:
.padding {
height:250px;
}
.padding2 {
height:1000px;
}
.sticky {
background:#000;
height:50px;
line-height:50px;
color:#fff;
font-weight:bold;
}
.sticky.stick {
position:fixed;
top:0;
z-index:10000;
}
JS:
function stickyDiv() {
var top = $(window).scrollTop();
var divTop = $('.anchor').offset().top;
if (top > divTop) {
$('.sticky').addClass('stick');
} else {
$('.sticky').removeClass('stick');
}
}
$(window).scroll(function(){
stickyDiv();
});
stickyDiv();
JSFiddle
Thanks!
Fixed position is relative to body, so it will count the 100% width from body width. If using javascript is ok, you can set the sticky width by getting the container width. Check the Updated Fiddle
You can add a 100% width wrapper around the container and have that stick instead.
<div class="wrap">
<div class="container sticky">
<div class="row">
...
</div>
</div>
</div>
updated fiddle:
https://jsfiddle.net/mileandra/omeegfc7/
add:
width:inherit;
to your .sticky.stick
JSFiddle
like Nanang Mahdaen El-Agun said, a fixed position relates the width to the body. With width:inherit; it will use the width of the .container class
reference: Set width of a "Position: fixed" div relative to parent div
I was able to get it to work by setting your container to "container-fluid" then adding the width: 100%; to your .stick class.
In Bootstrap 4 it's sufficient to add a <div class="sticky-top">...</div> around your row div: https://getbootstrap.com/docs/4.4/utilities/position/
<div class="sticky-top">
<div class="row">
<div class="col-sm-6">
Testing
</div>
<div class="col-sm-6">
Testing
</div>
</div>
</div>
I am working on a grid layout using css flex styling and want a total css solution, if possible, I have the means to fix it with javascript.
When a row exceeds the viewport width, it displays the scrollbar,
but when you scroll, the styling of the row element remains the size of the viewport,
it does not seem to "wrap" all of its children.
see : fiddle
Try scrolling, you will see the yellow row (.sk_row) class does not appear around all its children.
A solution would be fine, but I would like to know why the parent does not visually contain all children. I think I may be missing some key concept about flexboxes...
Duplicate of fiddle code...
<body>
<div id='pg_wrap'>
<div id='frm0'>
<div class='sk_scrl'>
<div class='sk_row'>
<div class='itm_val'>row 1</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
<div class='sk_row'>
<div class='itm_val'>row 2</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
</div>
</div>
</div>
#frm0{ width:420px;height:200px}
.sk_scrl{ overflow:auto;display:flex;flex-flow:column;align-content:stretch}
.sk_row{
display:flex;
justify-content:flex-start;
align-items:center;
background:#ff0;border:2px #f00 solid;
height:50px}
.itm_val{
display:flex;
border:1px #000 solid;background:#666;
flex:0 0 100px; height:30px; margin:0 5px;
align-items:center;justify-content:center}
Note : this is not the same as question
That op wants to change child behaviour, I want the parent to change.
It's not working the way you want because .sk_row inherits the width, in this case from #frm0:
#frm0 { width: 420px; }
With the class .sk_scrl you can't see it very well, because it's set to:
.sk_scrl { overflow: auto; }
If you use your browsers developer tools (assuming you have any), you'll see that the elements wrapped around your .itm_val divs are all 420 pixel wide. The reason the .itm_val divs are all visible outside of their container, is because they are "overflowing" out of their containing div.
Here's an example for how the width-inheriting-thing works:
<div class="container">
<div class="element"></div>
</div>
If you set the the width of .container to 50%, it will use up half of the available width within the window. If, however, you want .element to take up the full width of the window, you will have to adjust the width like this:
.element {
width: 200%;
}
If it were set to 100%, it would only be as wide as .container.
Here's a fiddle: http://jsfiddle.net/Niffler/n8hmpv13/
I have a DOM like this:
<div class='container'>
<div class='visual'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='container'>
<div class='visual'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<!-- more container nesting possible -->
</div>
</div>
The CSS is
.container .visual {
margin-left:20px;
}
.container .container .visual {
margin-left:40px;
}
.container .container .container .visual {
margin-left:60px;
}
which has to be done for every depth level and is of course silly.
Here's a jsfiddle (Updated: more structure, more lines of text)
Is there a simpler solution that maintains the tree-like HTML and has the same effect?
I know this is not a very elegant solution:
.container{
padding:20px 0 0 20px;
}
.nomove {
position:absolute;
left:10px;
}
DEMO
This code works fine:
<html>
<head>
<style type="text/css">
.container {
margin-left: 20px;
}
.nomove {
position:absolute;
left: 0px;
width: 100px;
}
.dummie {
color:transparent;
width: 100px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="visual">indent indicator</div>
<div class="nomove">text in this class is always left-aligned</div>
<div class="dummie">text in this class is always left-aligned</div>
<div class='container'>
<div class='visual'>indent indicator</div>
<div class='nomove'>text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
<div class="dummie">text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
</div>
</div>
</body>
</html>
The .nomove div is moved with position:absolute and left:0px to the left side. The dummie div makes a gap between two divs, because position:absolute has no height.
PS: Sorry for my english ;)
EDIT:
Now the dummie and the nomove div have the same text, the same width, but the dummie is transparent.
You could remove some of the container classes and simply rely on three visual classes.
HTML
<div>
<div class='visual1'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div>
<div class='visual2'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div>
<div class='visual3'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<!-- more nested containers possible -->
</div>
</div>
</div>
CSS
.visual1 {
margin-left:20px;
}
.visual2 {
margin-left:40px;
}
.visual3 {
margin-left:60px;
}
You can do it like this: http://jsfiddle.net/TMAXa/3/
Which is taking on from what #KevinBowersox said. but you dont need to use as much HTML code if you have an increment on the CSS.
<div class='visual1'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='visual2'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='visual3'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
I have one div that has a dynamic height and another div that is a float. Is there a way in css I can link div2's height with the height of div1?
I think it's that you want : http://www.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
It's possible that you can wrap both divs in a 3rd div(wrapper) and then set the height of div2 to 100%
<div class="wrapper">
<div class="div1">
</div>
<div class="div2">
</div>
<div style="clear: right"></div>
</div>
.div2 { float: right; height: 100% }
I have markup that looks like this
<div>
<h1 style="text-align:center;" >Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading 2</h1>
</div>
<div>
Content goes here
</div>
The problem is that heading 2 is centered relative to the remainder of space after the image, and not to the whole div, so its not centered on the page.
If I remove the img from the flow with position:absolute, it does not push down the content and instead overlaps it.
One way is to add a right padding to the div with the size of the logo:
<div style="padding-right: 50px;">
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
<div>
Content goes here
</div>
Another way is to remove the heading from the flow. This only works on the assumption that the logo height is bigger than the heading height. Beware also that image and heading could overlap.
<h1 style="position: absolute; width: 100%; text-align:center;">
Heading
</h1>
<img style="float:left;" src="logo.gif"/>
<div style="clear:both;">
Content goes here
</div>
Solved it through trial and error. I don't know why but in my testing it only works if width is set between 12 and 80%.
So it seems "h1" is a block element, and text-align does not center block elements, it only centers inline elements inside it, which explains the "centered off-center" behavior. So it turns out the answer is the same answer to the question "how do you center a block element?"
<div>
<h1 style="text-align:center;">Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="
text-align:center;
margin-left:auto;
margin-right:auto;
width:50%;
">Heading 2</h1>
</div>
<div style="clear:both;">
Content goes here
</div>
I know i am late for the party, but for future readers I found a different approach for that problem.
use 3 div elements (left div,middle div, right div) inside a flex displayed div container.
make the left and right div the same relative width (in %) and float each one of the to his side.set the middle div width with reminder of 100% - (left div + right div).
locate the image in the left div (or right div if your direction is RTL).
set the text align of the middle div as 'center'.
check this example. also here is a Plunker .
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
#editorheader {
display:flex;
}
#leftheaderdiv {
float:left;
width:20%;
background-color:gray;
display:inline-block;
}
#middleheaderdiv {
float:left;
width:60%;
background-color:red;
display:inline-block;
text-align: center;
}
#rightheaderdiv {
float:right;
width:20%;
background-color: gray;
}
</style>
</head>
<body>
<div class="subheader" id="editorheader">
<div id="leftheaderdiv"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"/></div>
<div id="middleheaderdiv">I AM IN THE MIDDLE</div>
<div id="rightheaderdiv"></div>
</div>
</body>
</html>
If you are really using logo image then you might try this solution:
<div>
<img style="float:left;" src="logo.jpg"/>
<h1 style="text-align:center; position:relative; left:-100px;" >Heading</h1>
</div>
where -100px replace with half of yours image width.
edit:
idea with absolute position from littlegreen's answer is working. Check it:
<div style="position:relative;">
<img style="float:left; position:absolute;" src="logo.jpg"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
This most simple solution:
<h2 style="text-align:center;text-indent:-*px">Heading 2</h2>
= the logo width