- This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
Viewing 11 posts - 1 through 11 (of 11 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I would like the Announcements and Latest News boxes to extend down so that they are equal with the sidebar.
The mainContent div is doing its job of extending all the way down. But inside it, the div .blogHolder is not filling the vertical space.
http://www.aaronheine.com/blackboard
Thanks
Any chance of a minimal demo in Codepen.io?
Debugging layout via Developer Tools is not ideal.
My first glance at the site on my laptop tells me you have some other issues.
WTF is this?
.navBG {
width: 5000px; /* really */
margin: 0 auto;
z-index: 1;
background-color: #990000;
height: 42px;
margin-left: -2000px; /* huh? */
position: relative;
top: 99px;
}
Dude….not the WHOLE page…a minimal structure demo.
Looks to me as though the ‘blogholder’…that’s the section below the slider…right? is fine.
I think we need to see what you’re seeing compared to how you think this should look. Could you post screenshots?
Oh…and in which browser?
I’m on Chrome. Here is a screen shot of what I’m looking for. http://i.imgur.com/eqaBoew.png
See how the mainContent is extending to the bottom as it should… http://i.imgur.com/8Dnlf0k.png
I just need the two white boxes to extend down as well.
That’s because that .mainContent
div wasn’t using flexbox…
It wasn’t set to display:flex
and then it need to be a column
.mainContent {
flex: 1 75%;
background: black;
order: 1;
position: relative;
display: flex;
flex-direction: column;
}
Sorted!
I tried that with your code.
http://codepen.io/AmIDigital/pen/reqGgg?editors=1100
Did you try resizing the browser window? Not lined up :(
Maybe the photo gallery on top is complicating things.
I was able to fill that space by applying flex-grow: 1;