I'm having a problem with layout structure.
Here is a mockup: http://i.imgur.com/JbboQ.jpg
And code:
<ul id="nav">
<li></li>
</ul>
<div id="home">
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
I guess the easiest way would be to just add width style to each div but than I wouldn't be able to nest styles which is not an option.
Right now #home div has 980px width which is perfectly fine but the problem is that slider has 100% background and the parent div has 980px. Maybe it's too late but I just can't find proper and semantic solution for this.
I would be really glad if someone could help me out here,
Thanks.
There are a couple of things you can try:
Separate out your slider div so you can get 100% of your page width.
<div id="home">
...
</div>
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
<div id="columns">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
.slider { width: 100% }
Or you can set the z-index property of the slider div to a number higher than the index of the home so it renders on top.
<div id="home">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
.home { width: 980px; z-index: 1 }
.slider { width: 100%; position: relative; top:-50; z-index: 2 }
Note: You will have to adjust the positioning of the slider div.
Related
Here is a codesandbox of what I have: https://codesandbox.io/s/still-surf-5vyy2
The pink square is stickied the way I want to but now I need to add a container so that the content doesnt stretch through the whole page.
THis is what the html looks like now:
<body>
<div style="height:200vh;background-color:blue">
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
If I were to add:
<body>
<div style="height:200vh;background-color:blue">
<div class='container'> <--------------------------THIS
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
</div>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
It breaks the sticky. Does anyone have a better solution for this?
Really appreciate the help.
Your container div has no height. please add that rule to 100% in your css:
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
height: 100%;
}
This question already has answers here:
Very long words not wrapping in HTML/CSS
(3 answers)
Closed 4 years ago.
I have some arbitrarily nested div elements using display: inline-block like this:
<div class="div-0">
<div class="div-1">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-2">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-3">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-4">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-5">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
</div>
Somebody has hidden a specific CSS rule somewhere that's something like this:
.div-0 .div-4 .div-01 {
min-width: 400px;
width: 100%;
}
This prevents all my div elements from being sized smaller than 400px. How do I hunt down which rule is forcing the minimum width?
I've tried manually inspecting each div with Chrome's inspector, but my actual code is nested 20+ div elements deep and it's difficult to determine by inspection.
* {
box-sizing: border-box;
}
div {
border: 1px solid red;
padding: 25px;
display: inline-block;
min-width: 100%;
}
.div-0 .div-4 .div-01 {
min-width: 400px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="div-0">
<div class="div-1">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-2">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-3">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-4">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-5">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
</div>
</body>
</html>
Go to the 'Computed' tab of the CSS styles. There, look for the 'min-width' property. Hover over the '400px' value and you will see an arrow. Click that arrow and it will jump you to the CSS rule that is enforcing it.
It turns out that I was asking the wrong question! My suspicion was wrong – there was no developer hiding CSS rules. Instead, it was some unbreakable text inside of the div elements.
There was a line of text in the div like Loremipsum....loremipsum that was unable to break properly. The div element cound not resize smaller than the width of this long "word".
Changing the word breaking strategy fixed my problem:
div {
word-break: break-word;
}
How to create an element in the Bootstrap that will normally equalize on one side (form left side) and 100% of the width on the other?
.maksymalnaszerokosc {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
<div class="container-fluid">
<div class="row maksymalnaszerokosc">
<div class="col-sm-6">text 1</div>
<div class="col-sm-6">text 2 </div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">nice same line text 1</div>
<div class="col-sm-6">Full width to right</div>
</div>
</div>
See this image how to must work
First, you must add class to that "full width to the right" column div, and then give it a position:absolute; right:0%; in the css,
Bootply: http://www.bootply.com/ukGiye0V6Y
Hope that helps, Cheerio!
I wrote a website as shown here.
Code is:
<div id="mainDiv" class="container">
<div id="header">
<div class="plc">
<h1></h1>
<nav>
<div id="navPos">
<div style="position: relative;right: 113px;">Register</div>
<div style="position: absolute;right: 255px;top: 37px;">Login</div>
<div style="position: absolute;top: 38px;right: 123px;">Market</div>
</div>
</nav>
</div>
</div>
<div id="body" class="container-fluid">
<div id="container">
<div id="overlay"></div>
<div id="menu"></div>
<div id="formPos"></div>
<div id="or">OR</div>
<div id="fbReg">
<img src="images/fbOne.png" id="fbIcon">
<div id="fbPos">Register with Facebook</div>
</div>
<div id="gReg">
<img src="images/gPlus.jpg" id="gIcon">
<div id="gPos">Register with Google</div>
</div>
<div id="cliPos">
<img src="images/Bistip-in-media.png" id="imgCli">
</div>
</div>
</div>
<div id="footer">
hello
</div>
</div>
CSS can be found in that jsfiddle. The problem is: Only body is scrollable, but header and footer aren't scrollable. As a result, I can't see the footer. How can I fix it?
For best results, expand the output window of jsfiddle
Anytime you find no scroll, is because there is overflow:hidden; property, which should be removed or changed to 'auto'
In your Case:
1) Remove overflow:hidden; or overflow:auto;
2) If you do not want scroll in your content(i.e. portion excluding header & footer)
DEMO
CSS
html,body
{
overflow:auto; /* Or just REMOVE overflow*/
}
#body
{
overflow:auto; /* Or just REMOVE overflow*/]
}
I have one wrapper which is fixed width for all of my pages, but what if i have a page with a content that needs to have a full width like for example slideshow.
HTML
<div id="wrapper">
//fixed width contents
</div>
CSS
#wrapper{
width: 960px;
margin: 0 auto;
}
I don't want to create another wrapper with full width like:
CSS
#wrapper-full-width{
width: 100%
}
HTML
<div id='wrapper-full-width'>
// some contents with full width like slideshow
</div>
So i only need one wrapper which i can use for all my pages.
HOMEPAGE
<div id="wrapper">
<div id="header"></div>
<div id="slideshow> // fixed width=960px</div>
<div id="footer"></div>
</div>
PRODUCT PAGE
<div id="wrapper">
<div id="header"></div>
<div id="slideshow"> // full width=100% </div>
<div id="footer"></div>
</div>
How can i use same wrapper for pages with contents that need to have a full width?
Well, there's two option: either add a class of fullwidth to the wrapper itself or to the <body> tag on that specific page:
<div id="wrapper" class="fullwidth">
<div id="header"></div>
<div id="slideshow"></div>
<div id="footer"></div>
</div>
#wrapper.fullwidth { width: 100%; }
Or:
<body class="fullwidth">
<div id="wrapper">
<div id="header"></div>
<div id="slideshow"></div>
<div id="footer"></div>
</div>
</body>
.fullwidth #wrapper { width: 100%; }