1 reply [Last post]
nsharony
nsharony's picture
Offline
newbie
Last seen: 2 years 46 weeks ago
Timezone: GMT+2
Joined: 2014-03-14
Posts: 4
Points: 6

Hello.

I'm new to CSS and trying to learn about the proper way to use divs along with the float style attribute.

My initial goal is to have two panels on the same horizontal line.
On the right I should have a panel that is 100px width and the rest of the layout (to its left) should be occupied by another panel.

I tried the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
    <div id="top_buttons" class="container"></div>
    <div id="top_panel" class="container"></div>
</div>
</body>
</html>

which refers to the following css file:
.container {
    border-style: solid;
    border-width:2px;
    border-color: #fcd53a;
    background-color: black;
    border-radius: 10px;
}
 
#top_panel {
    height: 48px;
    width: 100%;
    float:right;
}
 
#top_buttons {
    float:right;
    height: 48px;
    width: 110px;
}

Instead of having the panels display one next to the other, the "top_buttons" one is displayed on its own in a new line.
If I remove the "width: 100%;" attribute for the #top_panel rule, then the panels DO get displayed on the same line, but #top_panel now has a width of zero.

Any tips on how to resolve this?

Thanks in advance.

nsharony
nsharony's picture
Offline
newbie
Last seen: 2 years 46 weeks ago
Timezone: GMT+2
Joined: 2014-03-14
Posts: 4
Points: 6

I was able to solve this by

I was able to solve this by using:

#top_panel {
    height: 48px;
    width:calc(100% - 130px);
    float:left;
}

Everything else stays the same.

Is this the recommended way of doing such thing?
Will it work on all modern browsers?