-
Stupid, simple problem with formatting
I’m having this problem with the formatting of DIVs in a website that I;’m working on. I have a DIV on the left that’s the navigation bar with the buttons inside of it and to the far right I have a decorative bar with a halftone fade pattern The problem lies with the middle DIV that contains the text. I have that one as “middle_container” with the container that holds the text, “middle_text” inside of that. What’s happening is that when I put the text in that text DIV, it pushes the “right_gradient” DIV lower as you can see from my screenshot. The top of that gradient piece should line up with the bottom of the banner at the top without the white space in between. I have all of the DIVs set as “inline” and I’ve messed around with some other CSS properties to try to fix this thing, but I really feel like I’m shooting in the dark. What then are the CSS properties that these DIVs need to have or what kind of additional DIV might I need in the layout to straighten this out? Thanks in advance… this is going to be a huge help for me and hopefully a learning experience as well.
Below is the HTML code for that part of the page:
Here is the CSS code for those DIVs:#container {
width: 921px;
height: 898px;
margin-left: auto;
margin-right: auto;
margin-top: 2.5em;
color: #ffffff;
background-position: left top;
background-color: #FFF;
}#header {
width: 100%;
height: 245px;
background-image: url(../images/lavaun_header.jpg);
}#right_gradient {
width: 147px;
height: 653px;
background-image: url(../images/right_side_gradient.jpg);
background-color: #FFF;
background-repeat: no-repeat;
float: right;
display: inline;
position: relative;
}#nav_bar {
width: 208px;
height: 653px;
background-color: e9d6ad;
float: Left;
display: inline;
position: relative;
}.middle_container {
width: 566px;
height: 589px;
display: inline;
position: relative;
}middle_text {
width: 100%;
display: inline;
position: absolute;
height: auto;
}
-
3 Replies
-
if you post a link to the page we could really see what is going on, and could actually view
the htmlin the meantime, you might want to look at this article on laying out 3 column pages.it might help you understand and work with them:
https://matthewjamestaylor.com/blog/perfect-3-column.htm
-
I’ll certainly read that article. Thank you for posting it. I wonder though, what happened to the HTML that I posted on my original inquiry? I highlighted all of the code and hit the “code” button on here to make sure that it would show up properly. I hit the “preview post” button as well and I made sure that everything looked like I meant it to (that all of the code was showing up) before I posted. Now I see that none of it is showing up and there’s a big blank space where the code was meant to be. What gives? How do I properly display code in these CreativeCOW forum windows?
-
see the note above the posting box:
Note: The following are HTML characters and may cause parts of your post to disappear if not used correctly: <>&
BUT, to prevent insertion of nasty code, it will strip out actual html tags. so if you want to show
<h2> hello <h2>you actually have to write at least the ‘less than’ symbol with it’s unicode equivalent: & g t ; (without any white spaces)
to be safe do the same for ‘greater than’ symbol: & g t ; (without any white spaces)
that’s what i think is going on and how i get around it. maybe an administrator can explain it better.
tip: copy your code into a text editor, then do a ‘find’ and ‘replace all’ of the ‘less thans’ and ‘greater thans’ at once
Reply to this Discussion! Login or Sign Up