Archived topic
header float right
6 replies · Started by Chad Biggs on February 17, 2016
Hello, I am using a w3-container in my header.php. I need a <p> and a btn element to float right on the same line but nothing I do seems to work. It works great on a html page. The plan is to have these two elements on a single line floating right with a nav bar underneath and then a logo on the left of the header to balance things out. Will you point me in the right direction please?
http://cboysweb.com/
Thank you,
-Chad
Hi Chad,
I'm not sure what a w3 container is, but you can use the built in CSS framework in the theme like this:
<div class="grid-50">
Left column stuff
</div>
<div class="grid-50">
Right column stuff
</div>You could put that in a header widget and it should get you going.
Let me know :)
Light bulb = "click"! Thank you for the grid info.
You mentioned before that I should use header widgets, but I can't control their positioning. I still don't get it. They just stack on top of each other. I need a left, center and right. Will you explain if you have time? ... Do I use the same grid concept?
Thank you,
-Chad
Dag! Sorry to keep bothering you on this. It's almost but no cigar. I have the below divs in Before Header Content gp hooks. The button doesn't line up on the right and it doesn't work well in different size browsers. Will you tell me what I'm doing wrong here? < href="http://cboysweb.com/" target="_blank">http://cboysweb.com/</>
.red {
background-color: #F03;
height: 135px;
}
.green {
background-color: #3F3;
height: 135px;
padding-top: 60px;
font-size: 12px;
text-align: right;
}
.blue {
background-color: #03F;
height: 135px;
}
<!-- header grid -->
<div class="red grid-20"><img src="http://cboysweb.com/asset/poolblue-254x130.png" width="254" height="130" alt="Pool Blue Logo></div>
<div class="blue grid-20"><button type = "button" class = "btn btn-primary"><i class="fa fa-phone fa-lg"></i> (727)-858-7814</button></div>
<div class="green grid-50"><p>Tampa Bay and Lakeland Area Swimming Pool and Spa Contractor, Builder and Designer Since 1996</p></div>
<!-- End header grid -->You're missing a closing quotation after: alt="Pool Blue Logo
Well s***. Call me a dip and color me red. So sorry for the bother Tom and thank you so much for your help!
-Chad
No bother! Happy to help :)